点击下拉菜单响应式网站

onClick Dropdown menu Responsive Website

本文关键字：网站 响应 下拉菜单      更新时间：2023-09-26

我正在努力使我的网站响应，所以我需要有一个体面的菜单的移动视图。所以我给自己做了一个按钮，只有当我的尺寸在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();
});

jQuery代码中缺少了一些右引号/圆括号。

应该是

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

在http://jsfiddle.net/Wj8k5/演示
(使窗口小，这样你就可以看到手机版)

相关文章：