javascript - 简单的 jQuery 切换到 $ ("html, body").css( {"overflow": "hidden"}); when opened and then switch to "scroll" when closed

Question

切换器的工作方式与您预期的一样——它是通过将一个类附加到要打开的元素集来提供支持的。正如您可能在下面所说的那样:

问题是.. 你可能可以从我的尝试中看出，我有三个元素可以打开和关闭点击 .isilnk ' .isi__wrapper' 和 .isi__expander 我只是想设置它，当元素展开或切换打开时。 eg. if ($(".isi").hasClass("isi--show-isi")) { 只需设置 overflow: hidden 到 html, body 并且当它关闭或未打开或上面没有类时，只需设置 html, body { overflow: scroll; 。

我在下面的所有尝试都不允许它同时适用于打开和关闭，只有一个或另一个。因此，目前它在元素切换打开时有效，但当它关闭时，html, body 溢出不会返回滚动并且用户无法浏览该站点。

$(document).ready(function(){

    $('.isilnk').on('click', function(){
        $('.isi').addClass('isi--show-isi');
        $("html, body").css({"overflow": "hidden"});  
    }); 

    if ($(".isi").hasClass("isi--show-isi")) {
      $("isi__wrapper").css("overflow","scroll");
      $("html, body").css({"overflow": "scroll"});  
    }
    else { 
      $("html, body").css({"overflow": "scroll"});  
    }
    $('.isi__expander').click(function() {
       $("html, body").css({"overflow": "hidden"});  
    });

    $('.isi__wrapper').click(function() { 
        $("html, body").css({"overflow": "scroll"});  
    }
});

Answer 1

作为一个猜测:

$(document).ready(function(){

    $('.isilnk').on('click', function(){
        $('.isi').toggleClass('isi--show-isi');
        $("html, body").css({"overflow": "hidden"});  
        setCSS();
    }); 

    $('.isi__expander').click(function() {
      ('.isi').addClass('isi--show-isi');
      setCSS();
    });

    $('.isi__wrapper').click(function() { 
      ('.isi').removeClass('isi--show-isi');
      setCSS();
    }
});

function setCSS() {
    if ($(".isi").hasClass("isi--show-isi")) {
      $("isi__wrapper").css("overflow","scroll");
      $("html, body").css({"overflow": "scroll"});  
    }
    else { 
      $("html, body").css({"overflow": "scroll"});  
    }
}