当我点击菜单包装器应该扩大其宽度并且侧边栏应该隐藏时,我想创建一个类似于这样的toogle按钮。
这是正常的CSS
$sql=" SELECT table_B.id FROM table_B WHERE table_B.id NOT IN (SELECT table_A.id FROM table_A)";
$result = mysqli_query($con,$sql);
if (!$result) {
printf("Error: %s\n", mysqli_error($con));
exit();
}
while($row = mysqli_fetch_array($result)){
$not=$row[0];
}
所以当我点击那个按钮时,CSS
#my-wrapper {
Width:500px;
}
#sidebar-wrapper {
width:200px;
}
答案 0 :(得分:0)
您可以使用此代码来增加包装器的宽度并隐藏侧栏
jQuery:
$('#menu-wrapper').click(function(){
$("#my-wrapper").toggleClass('active');
$('#sidebar-wrapper').toggleClass('hide');
});
<强> CSS 强>
#my-wrapper.active {
width: 700px;
}
.hide {
display: none;
}
答案 1 :(得分:0)
您可以通过将DIV
s包装在父div中,并在按钮单击时切换hidden
类来轻松实现此目的。此外,您可以在hidden
类中执行所需的CSS。
HTML:
<a id="toggle" href="#">Toggle</a>
<div id="wrapper">
<div id="my-wrapper"></div>
<div id="sidebar-wrapper"></div>
</div>
CSS:
#my-wrapper {
width: 500px;
}
#sidebar-wrapper {
width: 200px;
}
#wrapper.hidden #my-wrapper {
width: 700px;
}
#wrapper.hidden #sidebar-wrapper {
display: none;
}
jQuery的:
$("#toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("hidden");
});