javascript - 隐藏侧边栏和下拉菜单

Question

当您在每个“div”外部单击时，我想隐藏下拉菜单和侧边栏。我添加了@media 规则，并且每个 div 都有一个按钮，它将显示和隐藏每个 div。我使用 javascript 来隐藏和显示这两个 div。现在的问题是，当浏览器的分辨率的最小高度为 992px 时，当我单击侧边栏将显示的滑动切换按钮时，侧边栏将隐藏。我想知道如何显示和隐藏 div。 HTML 代码:

    <div class="t-page-sidebar">
    <div class="t-sidebar">
        <a class="t-sidebar-brand" href="dashboard.php">
            <img class="t-sidebar-brand-img" src="stylesheet/images/logo_2.png" alt="logo">
            Dashboard
        </a>
        <h4 class="t-sidebar-title">Navigation</h4>
        <ul class="t-sidebar-list">
            <li class="t-sidebar-item">
                <a class="t-sidebar-link is-active" href="dashboard.php">
                    <i class="fa fa-home"></i>
                    Dashboard
                </a>
            </li>
            <li class="t-sidebar-item">
                <a class="t-sidebar-link" href="store-locator.php">
                    <i class="fa fa-map"></i>
                    Store Locator
                </a>
            </li>
            <li class="t-sidebar-item">
                <a class="t-sidebar-link" href="distance-matrix.php">
                    <i class="fa fa-exchange"></i>
                    Distance Matrix
                </a>
            </li>
            <li class="t-sidebar-item">
                <a class="t-sidebar-link" href="gallery.php">
                    <i class="fa fa-camera-retro"></i>
                    Gallery
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- MAIN BODY -->
<main class="t-page-content">
    <!-- HEADER -->
    <header class="t-navbar">
        <!-- TOGGLE BUTTON -->
        <button class="t-sidebar-toggle" id="sidebar-toggle">
            <span class="t-sidebar-bar"></span>
            <span class="t-sidebar-bar"></span>
            <span class="t-sidebar-bar"></span>
        </button>
        <!-- HEADER CONTENT -->
        <h2 class="t-navbar-title">Dashboard</h2>
        <div class="t-dropdown">
            <div class="t-avatar">
                <img class="t-avatar-img" src="stylesheet/images/default_pic.png" alt="User's Profile Image" />
            </div>
            <div class="t-dropdown-menu">
                <a class="t-dropdown-item" href="account-settings.php">Account Settings</a>
                <a class="t-dropdown-item" href="logout.php?logout">Logout</a>
            </div>
        </div>
    </header>
</main>

CSS Code:

    .t-page-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 250px;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s,-webkit-transform .2s;
    z-index: 300;
    margin-left: -250px;
    transition: all .2s ease-in-out;
    }

    @media all and (min-width: 992px){
    .container {
        max-width: 960px;
    }

    .t-page-sidebar {
        margin-left: 0;
    }

    .t-page-content {
        margin-left: 250px;
    }

    .t-sidebar-toggle {
        display: none;
    }
    }

Javascript Code:

    $(document).ready(function() {
    $(".t-dropdown").click(function() {
        $(".t-dropdown-menu").toggleClass("show");
    });


    $(document).on("click", ".t-sidebar-toggle", function(event){
            $(".t-page-sidebar").css("margin-left","0");
        });

    });

Answer 1

单击仪表板链接时，您可以使用 toggleClass jQuery 附加新类名并在 CSS 中设置相同的显示属性。