Question

当你点击每个＆＃34; divs＆＃34;时，我想隐藏下拉菜单和侧边栏。我添加了@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中设置显示属性。

Answer 2

Lawrence Agulto作为Paurnima Partole说，您可以使用 toggleClass jQuery 来解决问题。

 $(".t-page-sidebar").toggleClass("open-menu");

由于菜单覆盖了按钮，我建议您在菜单容器中添加另一个按钮以关闭菜单。

看看这是否解决了问题 - https://codepen.io/beduardo/pen/pLPmWO

隐藏侧边栏和下拉菜单

2 个答案: