移动点击下拉菜单不起作用?

时间:2015-02-13 19:10:02

标签: javascript jquery html css drop-down-menu

我想为我的网站的移动版本创建一个下拉菜单,但它似乎无法正常工作。

基本上,当我点击下拉菜单图片时,会出现下拉菜单。

JSFiddle:https://jsfiddle.net/xfvjv184/

包含的文件:

     <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

<div class="mobile_dropdown_menu_icon">
    <img class="mobilemenuicon" src="resources/mobilemenuicon.png" />
</div>

<div class="mobile_dropdown_menu">

</div>

CSS

    .mobile_dropdown_menu_icon {
        display:none;
    }

    .mobile_dropdown_menu {
        display:none;
    }

@media(max-device-width:500px) {

    .mobile_dropdown_menu_icon {
            display: block;
            float:right;
        }

    .mobilemenuicon {
            width:150px;
            height:150px;
            margin-top:10px;
            margin-right:20px;
        }

    .mobile_dropdown_menu {
            background-color: red;
            height:400px;
            width:100%;
        }

}

的jQuery

$(document).ready(function(){

    $('.mobile_dropdown_menu_icon').on("click" function() {
        $('mobile_dropdown_menu').css("display", "block");

    });   
});

这是不行的?我单击应显示mobile_dropdown_menu的图标,但它不适用于此代码。

1 个答案:

答案 0 :(得分:0)

这一行:

$('mobile_dropdown_menu').css("display", "block");

...缺少mobile_dropdown_menu前面的句号。