Question

我正致力于使我的网站具有响应能力，因此我需要为移动视图提供一个不错的菜单。所以我给自己买了一个按钮，只有在480px或更低的时候弹出才是好的。但问题是： 让菜单下拉不起作用。我需要的只是一个简单的下拉菜单，但我无法让它工作。

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/的演示（使窗口变小，以便您可以看到移动版）

onClick下拉菜单响应式网站

1 个答案: