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屏幕上徘徊导航时，它不稳定......它的第3个锂位于第1个上方..

但同样的js工作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>

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

1 个答案: