切换菜单仅在单击时打开，而不是默认情况下打开

toggle menu only opens when clicked and and not as default

本文关键字：默认 情况下 单击 菜单      更新时间：2023-09-26

我在我的网站上创建了一个侧菜单，唯一的问题是它只在我点击按钮时打开，而不是默认情况下打开。在大屏幕中，我需要它始终打开，尽管在小屏幕中我需要它关闭并能够打开。

我当前的javascript代码是：

$("#menu-toggle").click(function (e){
    e.preventDefault();
    $("#warpper").toggleClass("menuDisplayed");
});

我的html:

<div id="warpper">

    <!--sidebar-->
        <div id="sidebar-warpper">
        </div>
        <div id="page-content-warpper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <a href="#" class="btn btn-success" id="menu-toggle">toggle</a>

                    </div>
                </div>
            </div>
        </div>

</div>


$(document).ready(function(){
    if (isBigScreen()){
        $("#warpper").addClass("menuDisplayed");
    }
    $("#menu-toggle").click(function (e){
        e.preventDefault();
        $("#warpper").toggleClass("menuDisplayed");
        console.log('Hello');
    });
});
var ScreenThreshold = 600;
function isBigScreen(){
    var t = $(window).width();
    console.log(t);
    if (t >= ScreenThreshold){
        return true;
    }
    else {
        return false;
    }
}

您当前的代码是可以的，但对于默认情况下始终打开的代码，您必须在默认情况下将"menuDisplayed"添加到包装中。所以现在你的代码应该是这样的。

<div id="warpper" class="menuDisplayed">

<!--sidebar-->
    <div id="sidebar-warpper">
    </div>
    <div id="page-content-warpper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <a href="#" class="btn btn-success" id="menu-toggle">toggle</a>

                </div>
            </div>
        </div>
    </div>

而且你只需要在全屏中打开这个默认值，所以你必须在移动中删除这个类，然后切换它。

var w = $(window).width();
if (w < 768) {
   $("#warpper").removeClass("menuDisplayed");
}
$("#menu-toggle").click(function (e){
    e.preventDefault();
 $("#warpper").toggleClass("menuDisplayed");
 });
相关文章：