gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 06:38:00 25 4
gpt4 key购买 nike

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

问题是.. 你可能可以从我的尝试中看出,我有三个元素可以打开和关闭点击 .isilnk ' .isi__wrapper' 和 .isi__expander 我只是想设置它,当元素展开或切换打开时。 eg. if ($(".isi").hasClass("isi--show-isi")) { 只需设置 overflow: hiddenhtml, 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"});
}
});

最佳答案

作为一个猜测:

$(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"});
}
}

关于javascript - 简单的 jQuery 切换到 $ ("html, body").css( {"overflow": "hidden"}); when opened and then switch to "scroll" when closed,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34518175/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com