Question

我有一个固定的侧边栏，我需要它关闭按钮的触发器并覆盖“内容”ID的类，但是当再次打开侧边栏时删除此类。

非常感谢任何帮助。

<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">

Answer 1

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

这将切换侧栏的可见性，然后在内容div上切换一个类，您需要为此编写css

使用Button切换侧栏以展开Container

1 个答案: