切換菜單僅在單擊時打開，而不是默認設置

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

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

Answer 2

您當前的代碼是okey，但是對於默認情況下始終打開，您必須默認在包裝器中添加“ 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>

另外，您只需要在全屏模式下使用此默認打開設置，因此您必須在移動設備中刪除此類，然后再對其進行切換。 所以也可以按照以下方式更改jQuery。

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

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