我在负责任的网站上遇到了 jQuery 问题。当 html 的宽度小于 1050px 时，.slideToggle() 不应该工作，但它不适用

Question

我正在为平板电脑制作垂直导航。正如标题，当 html 的宽度小于 1050px 时，.slideToggle() 不应该工作，但就像我缩小页面一样，.slideToggle() 仍然工作。我该如何解决？

这里是HTML

 <div class="header_con">
                <span><a href="#"></a></span>
                <p><a href="#"><img src="images/logo.png" alt="logo"></a></p>
                <nav>
                    <ul class="depth1">
                        <li><a href="#">코로나-19</a>
                            <ul class="depth2">
                                <li><a href="#">손세정제</a></li>
                                <li><a href="#">소독제</a></li>
                            </ul>
                        </li>
                        <li><a href="#">컬렉션</a>
                            <ul class="depth2">
                                <li><a href="#"><small>new</small>클레멘타인 앤 바질</a></li>
                                <li><a href="#"><small>new</small>베티버 앤 바이올렛</a></li>
                                <li><a href="#">아로마테라피 시너지</a></li>
                                <li><a href="#">허벌리스트</a></li>
                                <li><a href="#">풋 리바이버</a></li>
                                <li><a href="#">인블룸</a></li>
                                <li><a href="#">크리스탈크러쉬</a></li>
                                <li><a href="#">배스타임</a></li>
                                <li><a href="#">선물세트/ 기프트세트</a></li>
                            </ul>
                        </li>
                        <li><a href="#">오일</a>
                            <ul class="depth2">
                                <li><a href="#">페이셜오일</a></li>
                                <li><a href="#">멀티오일</a></li>
                            </ul>
                        </li>
                        .
                        .
                        .
                    </ul>
                </nav>
        </div>
    </header>

这里是jQuery

var html = $("html");
    var wid = $("html").width();
    var pc_wid = 1050;
    if(wid>=pc_wid){
        $(".depth1 li").on("mouseenter",function(){
                $(this).children("ul").stop().slideToggle(300);
            }).on("mouseleave",function(){
                $(this).children("ul").stop().slideToggle(300);
            });
    }else {
        return false;
    }

Answer 1

看，您的 jQuery 代码是，当文档加载时，观察宽度是否大于或等于 pc_wid，如果是，则设置事件。这意味着如果您从大 window 开始然后调整到小，您将触发事件，并且，如果您从小 window 开始并调整到大 window, 它不会工作。

尝试这样的事情

var pc_wid = 1050;
$(".depth1 li").on("mouseenter",function(){
        if($("html").width() >= pc_wid)
            $(this).children("ul").stop().slideToggle(300);
    }).on("mouseleave",function(){
        if($("html").width() >= pc_wid)
            $(this).children("ul").stop().slideToggle(300);
    });

这里，你总是设置事件，但是如果宽度大于pc_wid你就执行。

我在负责任的网站上遇到了 jQuery 问题。当 html 的宽度小于 1050px 时，.slideToggle() 不应该工作，但它不适用

I've got a jQuery issue on responsible web. .slideToggle() shouldn't work when width of html is under 1050px, but It doesn't apply

html

css

jquery

width

responsive