javascript - 如何通过在 JQuery 中切换来恢复 div 的默认大小?
问题描述
我的应用程序中有两个 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 函数来激活按钮以隐藏和显示拆分器左
这是我在 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%' });
}
});
这是sidemenu-close的方法toggleClass的样式
.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 - 新的 Promise() 与 (async () => {})()
- java - 有没有办法使用变量来命名列表?
- c# - 两种不同的方法输出相同的图像
- angular - 角度 cdk 拖动:恢复 cdkDrag 容器内 html 输入中文本选择的默认单击和拖动行为
- c++ - 使用这个类型函数有什么好处?
- highcharts - 在多个图表之间同步缩放
- javascript - 菜单导航栏网页:动态菜单windows.screen
- sql - 插入后如何找到重复值并删除它们(使用触发器)?
- javascript - 跨 server.js 和 api 的 Socket.io 调用
- java - 如何使用自定义 ResourceBundle of Locale 使用日期时间格式化程序(Java 8)打印日期时间?