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

如何解决我在负责任的网站上遇到了jQuery问题当html的宽度小于1050px时，.slideToggle不起作用，但不适用

我正在为Tablet PC进行垂直导航。 作为标题，当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;
    }

解决方法

看，您的jQuery代码是，当文档加载时，查看宽度是否大于或等于pc_wid；如果是，则设置事件。这意味着，如果从一个大窗口开始，然后将其调整为一个小窗口，则会触发事件；如果从一个小窗口开始，然后将其调整为一个大窗口，则将无法正常工作。

尝试这样的事情

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，就执行该事件。