javascript - 为什么这个移动导航开关不能正常工作？

Question

我正在尝试在断点 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>

此移动导航应隐藏在 768 像素以上的屏幕中。所以我将以下 java 脚本代码放入 header 中:

/* 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 屏幕上时，它并不稳定......它是第 3 个 li 在第 1 个之上......

但同样的 js fiddle 工作 here the sample js toggle I tested 我正在尝试的网站有点不同。 SITE

我怎样才能让它工作？ 这个问题与 wordpress 有关？？

Answer 1

试试这个:

<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>