Question

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

我目前的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>

Answer 1

＆＃13;

$(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;
    }
}

＆＃13;

Answer 2

您当前的代码是okey，但是默认情况下总是打开，您必须添加＆＃34; menuDisplayed＆＃34;默认情况下进入你的包装器。所以现在你的代码应该是这样的。

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

此外，您只需要全屏显示此默认设置，因此您必须在移动设备中删除此类，然后切换它。所以也按照下面的方式更新jQuery。

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

 $("#warpper").toggleClass("menuDisplayed");
 });

切换菜单仅在单击时打开，而不是默认设置

2 个答案: