我的应用程序中有两个 div,它们将屏幕与内容和侧边菜单分开。
<div class="splitter-left ">
<div class="close-left-btn">
<button class="btn btn-primary" id="toggle-menu">Click me</button>
</div>
<div class="container-fluid content-close">
<div class="row">
<div class="col-4">
<p>Home</p>
</div>
<div class="col-4">
<p>About</p>
</div>
<div class="col-4">
<p>Contact</p>
</div>
</div>
</div>
</div>
<div class="splitter-right">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<strong>Header options</strong>
</div>
</div>
</div>
</div>
这是我为 splitter-left 和 splitter-right 设计的样式
.splitter-left {
display: inline-block;
width: 25%;
max-width: 300px;
min-width: 250px;
background-color: #fff;
margin-top: 10px;
margin-left: -35px;
vertical-align: top;
}
.splitter-right {
display: inline-block;
width: 85%;
margin-top: 10px;
position: relative;
left: 50px;
min-height: 400px;
}
我还制作了一个 JQuery 函数来激活按钮以隐藏和显示 splitter-left
这是我在 JQuery 中的函数
$("#toggle-menu").click(function () {
if ($(".content-close").toggle()) {
$(".splitter-left").toggleClass('sidemenu-close')
$(".splitter-right").css({ width: '100%' });
else {
$(".splitter-right").css({ width: '75%' });
}
});
这是 toggleClass 方法的样式,用于 sidemenu-close
.sidemenu-close {
width: 0% !important;
min-width: 0% !important;
}
当我点击按钮 Click me 时,splitter-right
类的宽度为 100%(这是有效的)。当我再次单击该按钮时,splitter-right
不会返回到默认大小 75%。
单击按钮时如何恢复默认大小?
最佳答案
我已使用以下解决方案修复它:
$("#toggle-menu").click(function() {
$(".content-close").toggle();
if ($(".splitter-left").hasClass('sidemenu-close')) {
$(".splitter-left").removeClass('sidemenu-close')
$(".splitter-left").css({
width: '25%'
});
$(".splitter-right").css({
width: '85%'
});
} else {
$(".splitter-left").addClass('sidemenu-close');
$(".splitter-right").css({
width: '100%'
});
}
});
关于javascript - 如何通过在 JQuery 中切换来恢复 div 的默认大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57586920/