Question

当我点击菜单包装器应该扩大其宽度并且侧边栏应该隐藏时，我想创建一个类似于这样的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;
}

Answer 1

您可以使用此代码来增加包装器的宽度并隐藏侧栏

jQuery：

$('#menu-wrapper').click(function(){
    $("#my-wrapper").toggleClass('active');
    $('#sidebar-wrapper').toggleClass('hide'); 
});

<强> CSS

#my-wrapper.active {
    width: 700px;
}
.hide {
    display: none;
}

Answer 2

您可以通过将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");
});

实例： http://jsfiddle.net/0wmsmca6/

使用jquery显示/隐藏功能

2 个答案: