2016-03-20 2 views
0

Итак, у меня есть эта боковая панель, и я хочу переключить ее поведение. вместо него закрывается так:Javascript - переключатель боковой панели всегда открыт

enter image description here

Я хочу, чтобы он был открыт, когда сайт начинает так:

enter image description here

Вот Javascript

<script type="text/javascript"> 
    $(function() { 
    $('.navbar-toggler').on('click', function(event) { 
     event.preventDefault(); 
     $(this).closest('.navbar-minimal').toggleClass('open'); 
    }) 
    });  
</script> 

И Html

<nav class="navbar navbar-fixed-left navbar-minimal animate" role="navigation" id="sidebar-1"> 
    <div class="navbar-toggler animate"> 
    <span class="menu-icon"></span> 
    <p id="menutab">Menu</p> 
    </div> 
    <ul class="navbar-menu animate"> 
    <li class="dropdown" id="dropdown-nav"> 
     <a href="#" class="animate dropdown-toggle" data-toggle="dropdown"> 
     <span class="desc animate" style="font-family: 'Roboto Condensed', sans-serif;">Top 5 Events</span> 
     <span class="mini-icon"><img src="Images/ps/Events.png" id="mini-icon"></span> 
     </a> 
     <ul class="dropdown-menu" id="events"> 
     <iframe src="Php/events.php" id="iframe" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"> 
      <p>Your browser does not support iframes.</p> 
     </iframe> 
     </ul> 
    </li> 

ответ

1
<nav class="navbar navbar-fixed-left navbar-minimal animate" 

перейти к вышесказанному строка в вашем HTML-разметки и добавить класс «открытым», как это

<nav class="navbar navbar-fixed-left navbar-minimal animate open" 

Поэтому он будет открыт по умолчанию.

+0

Wow ... это простой! haha Спасибо миллион – MuaathAli

0
<script type="text/javascript"> 
    $(function() { 
     $(this).closest('.navbar-minimal').toggleClass('open'); 
    }); 
    </script> 
0

добавить класс открыт для NavBar-меню, с помощью которого она показать открыто и при нажатии кнопки рядом с меню его toggele элемента ul.navbar-меню

$(".navbar-toggler").click(function() { 
    $(".navbar-menu").slideToggle(); 
    }); 
Смежные вопросы