onClick下拉菜单响应网站

Question

我正在努力使我的网站响应，所以我需要有一个体面的菜单为移动视图。 所以我给自己一个按钮，只有在480像素或更低，这是很好的时候弹出。但问题是： 使菜单下拉不起作用。我需要的只是一个简单的下拉菜单，但我无法设法使其工作。

jQuery的链接：

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" /> 
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

HTML：

<ul id="mobimenu"> 
    <a href="#menu"> 
    <img src="threelines.png" alt="menu button"> 
    </a> 
    <div id="mobidrop"> 
     menu comes here 
    </div> 
</ul> 

CSS：

 #mobimenu{ 
      display: none; 
     } 

     #mobidrop{ 
      display:none; 
     } 

    @media screen and (max-width: 480px) { 

    #mobimenu { 
     display: block; 
     float: right; 
    } 

    #mobidrop{ 

     width: 100px; 
     height:50px; 
     background-color: red; 
    } 

} 

的jQuery：

$(function(){$("#mobimenu").on('click', function() { 
    $("#mobidrop").show(); 
}); 

Answer 1

你缺少一些收盘报价/括号中的jQuery代码..

应该

$(function(){ 
    $("#mobimenu").on('click', function() { 
     $("#mobidrop").show(); 
    }); 
}); 

演示在http://jsfiddle.net/Wj8k5/
（使窗口小，所以你可以看到手机版）