Toggle-Menü öffnet sich nur beim Klicken und und nicht als Standard

Question

Ich habe ein Seitenmenü auf meiner Website erstellt, das einzige Problem ist, dass es nur öffnet, wenn ich auf die Schaltfläche und nicht als Standard, In großen Bildschirmen muss ich es immer offen sein obwohl ich es in kleineren Bildschirmen brauche, ist es nah und in der Lage, es zu öffnen.

mein aktueller Javascript-Code ist:

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

mein 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

Ihr aktueller Code ist okey, aber für immer standardmäßig geöffnet Sie haben um "menuDisplayed" standardmäßig in Ihren Wrapper hinzuzufügen. Jetzt sollte dein Code so sein.

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

Und auch müssen Sie diesen offenen Standard nur in vollem Umfang nutzen, so dass Sie diese Klasse in Mobile zu entfernen und dann Knebel es. also auch die jQuery wie folgt.