Question

当我的页面超过860像素宽时加载脚本时，脚本会按照我想要的方式工作。它在.open类的子ul标签上没有li.parent类。当我缩小页面时，它还会添加该类。

但是，我注意到当我从页面变小到更大时，.open类仍然徘徊。而且，如果我单击li.parent，它将抛出脚本，并且在页面较小时不再起作用。

这是我的剧本。

$(window).resize(function (){
    if ( $(window).width() < 860 ) {
        $(document).ready(function(){
            $('li.parent').click(function(){
                $(this).find('ul').toggleClass('open');
            });
        });
    }
    else {
        $('ul#primary-nav').removeAttr('style');
        $('li.parent').find('ul').removeClass('open');
    }
});

同一文档中的其他脚本。也许是在引起冲突？

// Mobile Menu Slide Toggle 
jQuery(document).ready(function() {
    jQuery('.show_nav').click(function(e) {
        e.preventDefault();
        jQuery('#primary-nav').slideToggle();
    });
});

// For Menu Caret
jQuery(document).ready(function() {
    jQuery('ul#primary-nav li').has('ul').addClass('parent');
});

一些CSS

ul#primary-nav li.parent ul {display: none;}

ul#primary-nav li.parent ul.open {display: block;}

一些HTML

<a href="#primary-nav" class="show_nav"><img src="images/hamburger-lines-white.svg" alt="Menu" width="25" height="25"></a> 
<ul id="primary-nav">
    <li><a href="#">About</a>
        <ul>
            <li><a href="#">History</a></li>
            <li><a href="#">Facilities</a></li>
        </ul>
    </li>
    <li><a href="#">Tennis</a></li>
    <li><a href="#">Classes</a></li>
    <li><a href="#">Calendar</a></li>
    <li><a href="#">Newsletter</a></li>
    <li><a href="#">Home Owners</a>
        <ul>
            <li><a href="#">Board of Directors</a></li>
            <li><a href="#">Architectural Committee</a></li>
            <li><a href="#">Documents and Forms</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

曾经试图弄清楚这一点，并在整个站点上进行了浏览。真的可以使用一些帮助。

Answer 1

忘记jQuery并使用媒体查询。

ul#primary-nav li.parent ul {display: none;}

@media only screen and (min-width: 860px) {
    ul#primary-nav li.parent ul {display: block;}
}

无法弄清楚如何使toggleClass与窗口调整大小一起正常工作

1 个答案: