Question

我制作了一款可以正常工作的小手风琴，但是我想添加一些功能，你也可以关闭所有的盒子。

在this DEMO中，您可以看到，打开的箱子永远不会超过一个。请参阅下面的jQuery代码：

$(function() {
  $('.job_content .job_description_box').hide();
  $('.job_box:first').addClass('active').next().slideDown('slow');
  $('.job_box').click(function() {
    if($(this).next().is(':hidden')) {
        $('.job_box').removeClass('active').next().slideUp('slow');
        $(this).toggleClass('active').next().slideDown('slow');
        $(".downarrow", this).toggleClass( ".uparrow" );
    }
  });
});

现在，如果您点击打开的框，它应该会崩溃。这是我的尝试，但遗憾的是，它不起作用：

if($(this).find('.job_description_box').is(':visible')) {
  $(this).slideUp('slow');
}

---

对于那些看过演示的人：我在谈论底部的蓝色工作箱。

Answer 1

    if($(this).next().is(':hidden')) {
        $('.job_box').removeClass('active').next().slideUp('slow');
        $(this).toggleClass('active').next().slideDown('slow');
        $(".downarrow", this).toggleClass( ".uparrow" );
 }
  else
  {
    $(this).toggleClass('active').next().slideUp('slow');
  }

我添加了一个＆＃39; else＆＃39;声明你当前的＆＃39;如果＆＃39;再次单击该框时隐藏内容的声明。

编辑：将其添加到CSS文件中。这将旋转您的箭头而不是使用其他图像。

.arrow_rotate {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg); 
  -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg;
     transform: rotate(180deg);

}

更新您的JQuery：

 $('.job_box').click(function() {
    if($(this).next().is(':hidden')) {
        $('.job_box').removeClass('active').next().slideUp('slow');
        $(this).toggleClass('active').next().slideDown('slow');
        $(".downarrow", this).addClass('arrow_rotate');
 }
 else
  {
    $(this).toggleClass('active').next().slideUp('slow');
                $(".downarrow", this).removeClass('arrow_rotate');
  }

现在应该按照您的要求进行。

折叠手风琴中的所有标签（不是jQuery UI）

1 个答案: