【问题标题】:jQuery show/hide toggle DIVsjQuery 显示/隐藏切换 DIV
【发布时间】:2013-06-07 20:25:04
【问题描述】:

所以,我成功地编写了一个脚本,通过单击月份来显示/隐藏 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?

【问题讨论】:

    标签: javascript jquery html toggle


    【解决方案1】:

    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{          
              }
            });
          });
    

    【讨论】:

    • 您还可以使用... .slideToggle(1000, function(){ ... 更改速度,这将使切换时间占用 1 秒(1000 毫秒)。只是评论他的信息
    【解决方案2】:

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

    【讨论】:

      猜你喜欢
      • 2013-01-16
      • 1970-01-01
      • 1970-01-01
      • 2023-03-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多