jQuery显示/隐藏切换DIV

时间:2013-06-07 11:38:09

标签: javascript jquery html toggle

所以,我已成功找到一个脚本,通过点击月来显示/隐藏div。

如果您滚动到http://kaye.at/test/的底部并点击“四月”或“五月”,您就可以看到它正常工作。

问题是我不喜欢它在关闭时动画向左滑动​​的方式,我宁愿它向下滑动或向后滑动,但是无法在javascript中找到修改它的位置?

这是JS:

$(document).ready(function() {
  $('.nav-toggle').click(function(){
        //get collapse content selector
        var collapse_content_selector = $(this).attr('href');                   
        //make the collapse content to be shown or hide
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function(){
           if($(this).css('display')=='none'){}else{}
        });
   });
});

HTML:

<div id="wrapper-alt" class="shade8">
  <div class="content">
    <h1 class="full"><a href="#collapse1" class="nav-toggle shade81">APRIL</a></h1>
  </div>
</div>

<div id="collapse1" style="display:none">
   <div id="wrapper-alt" class="shade8">
     <div class="content">
         Content goes here
     </div>
   </div>
</div>  

道歉,如果我的JS很乱,我是一个完全的业余爱好者,只是为了娱乐和学习而玩它!

另外,我刚刚注意到它不适用于多个DIV,所有链接只打开1个div,我如何将它用于多个不同的DIV?

2 个答案:

答案 0 :(得分:2)

slideToggle() jquery的方法

$('.nav-toggle').click(function(){
        //get collapse content selector
        var collapse_content_selector = $(this).attr('href');                   

        //make the collapse content to be shown or hide
        var toggle_switch = $(this);
        $(collapse_content_selector).slideToggle(function(){
          if($(this).css('display')=='none'){}else{          
          }
        });
      });

答案 1 :(得分:0)

我最终使用了不同的脚本,因为我似乎无法使其正常工作!

相关问题