Question

我已经对这个代码猛烈抨击了2天了。我需要手风琴一次只打开一个部分 - 只要你点击不同的标题就可以了 - 但它不会让我通过点击自己的标题关闭open div - 它只是反弹回来。我不希望一个部分始终打开 - 它需要完全关闭。请帮忙！

<div id="accordian-container">
  <div id="section1" class="accordiandiv">
    <header id="header-container1">
      <h3 id="heading1">This is a heading</h3>
    </header>
      <div>
        <p>Content</p>
      </div>
  </div>
  <div id="section2" class="accordiandiv">
    <header id="header-container2">
      <h3 id="heading3">This is a heading</h3>
    </header>
      <div>
        <p>Content</p>
      </div>
  </div>
  <div id="section3" class="accordiandiv">
    <header id="header-container3">
      <h3 id="heading3">This is a heading</h3>
    </header>
      <div>
        <p>Content</p>
      </div>
  </div>

这是我的剧本：

$(document).ready(function() {
  $('.accordiandiv header').each(function() {
    var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();
    answerAll = $('.accordiandiv').children('div').hide().css('height','auto').slideUp();
    tis.click(function() {
      state = !state;
      answerAll.slideUp(state);
      $('.accordiandiv').nextAll('header.active').removeClass('active');
      answer.slideToggle(state);
      tis.toggleClass('active', state);
    });
  });
});

以下是手风琴演奏的现场，但一次只打开一个div。

http://hills.ccsf.edu/~csmith70/16minclubtest/ask-wendy.html

请注意，某些标题需要在.active上进行背景颜色更改。这是在此页面上运行的脚本。

$(document).ready(function() {
  $('.accordiandiv header').each(function() {
    var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();
    answerAll = $('.accordiandiv').children('div').hide().css('height','auto').slideUp();
    tis.click(function() {
      state = !state;
      answer.slideToggle(state);
      tis.toggleClass('active', state);
    });
  });
});

##

另外请知道每个标题＆gt; div中的内容远比段落标记更多 - 还有其他div，img和更多的手风琴。

Answer 1

您可以将代码缩减为：

$(document).ready(function () {
    $('p').hide();
    $('.accordiandiv header').click(function () {
        var paragraph = $(this).closest('.accordiandiv').find('p');
        $('p').not(paragraph).slideUp();
        paragraph.slideToggle();
    })
});

<强> Fiddle Demo

Answer 2

您无条件地将状态设置为活动状态。需要有一个不这样做的案例。如果您刚刚单击了一个div并且它已打开，则需要一个不会将状态设置为活动状态的条件。

这是click（）函数的详细版本，但我确信它可以缩小（未经测试的抱歉！）：

tis.click(function() {
      var openThis = state;
      state = !state;
      answerAll.slideUp(state);
      $('.accordiandiv').nextAll('header.active').removeClass('active');
      if (openThis) {
        answer.slideToggle(true);
        tis.toggleClass('active', true);
      }
    });

Answer 3

我减少它摆脱循环

<强>已更新

$(document).ready(function () {
    $('.accordiandiv p').hide();

    $('.accordiandiv').on('click', function () {
        $('.accordiandiv p').slideUp(200, "linear", function () {
            $('.accordiandiv h3').removeClass('active');
        });        

        var isVisible = $(this).find('p').is(':visible');

        if (!isVisible) {
            $(this).find('p').slideDown(200, "linear", function () {
                $(this).closest('.accordiandiv').find('h3').addClass('active');
            });
        }
    });    
});

<强> Demo ：

手风琴 - 一次打开一个div - 当前div关闭，然后反弹回来

以下是手风琴演奏的现场，但一次只打开一个div。

3 个答案: