為什么此移動導航切換無法正常工作？

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>

此移動導航應為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小提琴在這里工作，我測試了示例js切換 ，而我嘗試的網站則有所不同。 現場

我該如何運作？ 這個問題與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>