Jquery 使用按钮切换侧栏以展开容器

Jquery 使用按钮切换侧栏以展开容器,jquery,Jquery,我有一个固定的侧边栏,我需要它在按钮触发时关闭,并覆盖id为“content”的类,但在侧边栏再次打开时删除该类 非常感谢您的帮助 <div id="container" class="fixed-header"> <!--SIDEBAR--> <div id="sidebar"> <div id="sidebar-right"></div> <ul id="nav"> <li&

我有一个固定的侧边栏,我需要它在按钮触发时关闭,并覆盖id为“content”的类,但在侧边栏再次打开时删除该类

非常感谢您的帮助

<div id="container" class="fixed-header">
    <!--SIDEBAR-->
    <div id="sidebar">
<div id="sidebar-right"></div>
    <ul id="nav">
        <li>
            <a href="dashboard.php">Dashboard</a>
        </li>

        <li>
            <div class="sub-menu-click">Clients</div>
            <ul class="sub-menu">
                <li><a href="lookup-clients.php"><i class="fa fa-angle-right"></i>Lookup Clients</a></li>
                <li><a href="create-a-client.php"><i class="fa fa-angle-right"></i>Create a Client</a></li>
            </ul>
        </li>

        <li>
            <div class="sub-menu-click">Properties</div>
            <ul class="sub-menu">
                <li><a href="lookup-properties.php"><i class="fa fa-angle-right"></i>Lookup Properties</a></li>
                <li><a href="create-a-property.php"><i class="fa fa-angle-right"></i>Create a Property</a></li>
            </ul>
        </li>

        <li>
            <div class="sub-menu-click">Appointments</div>
            <ul class="sub-menu">
                <li><a href="lookup-appointments.php"><i class="fa fa-angle-right"></i>Lookup Appointments</a></li>
                <li><a href="book-an-appointment.php"><i class="fa fa-angle-right"></i>Book an Appointment</a></li>
            </ul>
        </li>

        <li>
            <div class="sub-menu-click">Inventories</div>
            <ul class="sub-menu">
                <li><a href="lookup-inventories.php"><i class="fa fa-angle-right"></i>Lookup Inventories</a></li>
                <li><a href="create-an-inventory-1.php"><i class="fa fa-angle-right"></i>Create an Inventory</a></li>
            </ul>
        </li>

        <li>
            <div class="sub-menu-click">Check-Ins</div>
            <ul class="sub-menu">
                <li><a href="lookup-check-ins.php"><i class="fa fa-angle-right"></i>Lookup Check-Ins</a></li>
                <li><a href="create-a-check-in.php"><i class="fa fa-angle-right"></i>Create a Check-In</a></li>
            </ul>
        </li>

        <li>
            <div class="sub-menu-click">Check-Outs</div>
            <ul class="sub-menu">
                <li><a href="lookup-check-outs.php"><i class="fa fa-angle-right"></i>Lookup Check-Outs</a></li>
                <li><a href="create-a-check-out.php"><i class="fa fa-angle-right"></i>Create a Check-Out</a></li>
            </ul>
        </li>

    </ul>

  • 客户
  • 性质
  • 约会
  • 存货
  • 登记入住
  • 退房

    <div id="content">
        <div class="container">

这将切换侧栏的可见性,然后还将切换content div上的类,您需要为其编写css

这将切换侧栏的可见性,然后还将切换content div上的类,您需要为其编写css

$(document).ready(function(){
    $('#toggle-sidebar').on('click', function(){
        $(this).toggle();
        $('#content').toggleClass('content-full-width');
    });
});