javascript - 为什么此移动导航切换无法正常工作？

我正在尝试在断点768px上创建移动导航（切换类型）。

我的标记是：

<div class="tm_menu_mobile">

    <div class="menu_icon">
        <div class="three_line"></div>
        <div class="three_line"></div>
        <div class="three_line"></div>
    </div>
        <div style="clear:both;"></div>

    <div id="nav">
        <div class="navigasi_menu">
            <div class="navigasi_list">
                <div class="nav-menu">
                    <ul>
                        <li class="page_item page-item-7"><a href="#">Home</a></li>
                        <li class="page_item page-item-2"><a href="#">Sample Page</a></li>
                        <li class="page_item page-item-9"><a href="#">test page 1</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>

此移动导航应为768px以上的隐藏屏幕。因此，我将以下Java脚本代码放入标头中：

/* Mobile navigation*/
jQuery(document).ready(function() {
    $('#nav').hide();
    $('.menu_icon').click(function() {
            $('#nav').slideToggle('fast');
            return false;
        });
});

然后将以下CSS代码放入样式表：

/* Primary mobile menu */
 .tm_menu_mobile {
    display: block;
    margin: 15px auto !important;
    width: 98.5% !important;
    background:#0071B7;
    padding:6px;
    height:auto;
    overflow:hidden;
}
/* avoiding horizontal scroll bar across the site */
 .navigasi_menu {
    width: 100%
}
.navigasi_menu li {
    float: none;
    text-align: center;
    border-bottom: 1px solid #fff;
}
/* Making navigation li one below another */
 .navigasi_menu li:hover {
    width: 100%
}
.tm_menu_mobile .menu_icon {
    width:50px;
    height:50px;
    border-radius: 10px;
    border:2px solid #000;
    float:right;
    margin-right:10px;
}
.menu_icon .three_line {
    float:none;
    width:36px;
    height:5px;
    background:#fff;
    margin:9px auto;
}
.tm_menu_mobile #nav {
    display: inline-block;
}

但切换不起作用。
另外，当我将鼠标悬停在768px屏幕上时，它并不稳定...它的3rd li高于1st。

但相同的js提琴作品here the sample js toggle I tested
和我尝试的网站有些不同。 SITE

我该如何运作？
这个问题与WordPress有关？

最佳答案

尝试这个 ：

<script type="text/javascript">
    /* Mobile navigation toggle*/
    jQuery(document).ready(function() {
        jQuery('.tm_menu_mobile #nav').hide();
        jQuery('.menu_icon').click(function() {
                jQuery('.tm_menu_mobile #nav').slideToggle('fast');
                return false;
            });
    });
</script>

关于javascript - 为什么此移动导航切换无法正常工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30321029/