2015-08-17 3 views
0

Когда пользователь нажимает на боковую панель, я хочу, чтобы она включалась или выходила. Может показаться, чтобы получить это произойдет здесь код у меня есть:.slideToggle действует не так, как должно быть?

код JQuery:

$(function() { 
    $("a#toggle").click(function(e) { 
    e.preventDefault(); 
    $("#aside").slideToggle(); 
    return false; 
    }); 
}); 

HTML:

<div class="wrap" id="aside"> 
     <aside class="left-aside"> 
      <header class="aside-header"> 
       <h1>stuff</h1> 
      </header> 
     </aside> 
    </div> 
    <a id="toggle">Sidebar</a> 

и CSS:

#aside { 
    display: none; 
} 
+0

http://jsfiddle.net/arunpjohny/ono66rpt/1/? –

+1

, поскольку вы вызываете предупреждение по умолчанию, нет необходимости возвращать false из обработчика –

+0

, когда вы нажимаете на слово Боковая панель, вы хотите, чтобы 'div id =" в сторону "' скользить вверх и вниз? Похоже, это то, что происходит. Я не уверен, чего ты хочешь. –

ответ

1

Вы должны попробуйте это скользящее

<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>jQuery.getJSON demo</title> 
     <style> 
     #aside { 
     display: none; 
     </style> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
     <script> 
    $(document).ready(function(){ 
    $(function() { 
     $("#toggle").click(function(e) { 
     e.preventDefault(); 
     $("#aside").slideToggle(); 
     return false; 
     }); 
    }); 
    }); 
    </script> 
    </head> 
    <body> 
     <div class="wrap" id="aside"> 
      <aside class="left-aside"> 
       <header class="aside-header"> 
        <h1>stuff</h1> 
       </header> 
      </aside> 
     </div> 
     <a id="toggle">Sidebar</a> 

    </body> 
    </html> 
Смежные вопросы