【问题标题】:Expand/Collapse all jquery展开/折叠所有 jquery
【发布时间】:2012-10-19 21:05:28
【问题描述】:

我有以下 jquery,可以在我的页面上展开和折叠部分。 它还会记住上次展开的部分,并在重新加载页面时应用该部分。

我想要做的是在我的页面上添加一个“全部展开”和“全部折叠”链接,但我不确定脚本应该是什么样子?有什么帮助吗?

<script type='text/javascript'>
$(function () {
    $(".toggle").hide();                                       //Hide .toggles

    $(window).load(function () {
        $('.toggle').not(':hidden').prev('.trigger').trigger("click");
    });

    $('.trigger').each(function () {                           //For each .trigger
        var theActive = $.cookie($(this).attr('id'));          //Retrieve the cookies
        if (theActive) {                                       //Verify if cookies exist
            $('#' + theActive).next(".toggle").slideDown(0);   //And slide down the respective .toggle
        }
    });

    $(".trigger").toggle(                                      //Toggle permits alternate clicks
   function () {
   $(this).next('.toggle').slideDown('slow');                  //On odd clicks, .toggle slides down...
   $.cookie($(this).attr('id'), $(this).attr('id'));           //...and the cookie is set by its ids.
   }, function () {
   $(this).next('.toggle').slideUp('slow');                    //On even clicks, .toggle slides up...
   $.cookie($(this).attr('id'), null);                         //...and the cookie is deleted.
   });
});

第 1 节
<div class = "toggle">
  Some stuff
</div>    
<h3 class = "trigger" id="H1">Section 2</h3>
<div class = "toggle">
  More stuff
</div>

【问题讨论】:

  • 试试这个 ..designgala.com/…
  • 您可以有一些隐藏变量,并将最后一个单击的项目和操作放入值中。像'#h1;扩张'。然后在准备好的事件中检查隐藏的值并用';'解析分隔符并根据条件调用 slideDown /slideUp

标签: jquery slidedown slideup


【解决方案1】:

除非我弄错了,否则切换类是您要扩展的部分,所以这样做

$(".toggle").slideDown();

应该使用类切换向下滑动所有元素。使用 slideUp 作为全部折叠按钮。

【讨论】:

  • 听起来很简单。我最初认为我必须自己完成每个部分,但显然不是。会试试看。
  • 还没有。我没有花很多时间在上面。当然,我只是遗漏了一些明显的东西。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-11-19
  • 2021-01-15
  • 2012-05-15
  • 1970-01-01
  • 2012-01-14
  • 2016-04-29
相关资源
最近更新 更多