Question

我试图创建一个在展开之前显示上面一行内容的手风琴。

像这样：

________________
HEADER ONE    v   - expanded first tab
________________

[  ][  ][  ][  ]  - first row content
[  ][  ][  ][  ]  - second row content
[  ][  ][  ][  ]  - third row content
________________
HEADER TWO    <   - closed first tab
________________
[  ][  ][  ][  ]  - first row shows content
________________
HEADER THREE  <   - closed second tab
________________
[  ][  ][  ][  ]  - first row shows content

一旦用户点击相应的标题，它将显示下面的更多内容，仍然导致所有其他内容隐藏在第一行之外。

HTML：

<div id="container">
    <h1 class="header">HEADER 01</h1>
    <div class="content">
        <div class="viewable">
            <li>content 01</li>
            <li>content 02</li>
            <li>content 03</li>
            <li>content 04</li>
        </div>
        <div class="hidden">
            <li>content 05</li>
            <li>content 06</li>
            <li>content 07</li>
            <li>content 08</li>
        </div>
    </div>
</div>

JQUERY：

$(document).ready(function()
    {
    var $heading = $('.header');
    var $content = $('.hidden');

    $heading.first().toggleClass('active').toggleClass('inactive');
    $('.hidden').first().slideDown().toggleClass('show-content');

    $heading.click(function() {
        if($(this).is('.inactive')) {
            $content.slideToggle(200);
        }
        else {
            $(this).toggleClass('active').toggleClass('inactive');
            $heading.next().slideToggle().toggleClass('show-content');
        }
    });
    return false;
});

我最终想把这个帖子保留下来，所以如果有更聪明的方法可以做到这一点，那就太棒了！

编辑：代码正在做某事，但它没有做我想做的事，它打开并关闭点击随机标签。这是小提琴http://jsfiddle.net/Bc4uD/

先谢谢了，

A

Answer 1

我认为你最大的错误是使用全局变量$content，它实际上引用了所有内容div的数组。您只需选择所单击标题的内容即可。此外，您对toggle *方法的广泛使用可能会使您感到困惑，因为您可能认为它实际上在切换到另一种方式时会以一种方式切换。使用addClass()/removeClass()和slideDown()/slideUp()等特定方法可以更轻松地调试代码并查看正在进行的操作。试试这个：http://jsfiddle.net/tonicboy/Bc4uD/2/

<强> HTML：

<div id="container">
        <h1 class="header">HEADER 01</h1>

    <div class="content">
        <div class="viewable">
            <li>content 01</li>
            <li>content 02</li>
            <li>content 03</li>
            <li>content 04</li>
        </div>
        <div class="hidden">
            <li>content 05</li>
            <li>content 06</li>
            <li>content 07</li>
            <li>content 08</li>
        </div>
    </div>
</div>
<div id="container">
        <h1 class="header">HEADER 02</h1>

    <div class="content">
        <div class="viewable">
            <li>content 01</li>
            <li>content 02</li>
        </div>
        <div class="hidden">
            <li>content 03</li>
            <li>content 04</li>
            <li>content 05</li>
            <li>content 06</li>
        </div>
    </div>
</div>
<div id="container">
        <h1 class="header">HEADER 03</h1>

    <div class="content">
        <div class="viewable">
            <li>content 01</li>
            <li>content 02</li>
        </div>
        <div class="hidden">
            <li>content 03</li>
            <li>content 04</li>
            <li>content 05</li>
            <li>content 06</li>
        </div>
    </div>
</div>

<强> JS：

$(document).ready(function () {
    var $heading = $('.header');
    var $content = $('.hidden');

    $heading.first().addClass('active');
    $('.hidden').first().slideDown(200).addClass('show-content');

    $heading.click(function () {
        var $this = $(this), // cache it for performance
            $thisContent = $this.next('.content').find('.hidden');

        if ($this.is('.active')) { // Extra content is showing so hide it
            $thisContent.slideUp(200).removeClass('show-content');
            $this.removeClass('active');
        } else { // Extra content is hidden so show it
            $thisContent.slideDown(200).addClass('show-content');
            $this.addClass('active');
        }
    });
});

Answer 2

这里去

http://plnkr.co/edit/zAvdJ7SG8TmMEgDCKmrh

$(document).ready(function() {
  var heading = document.getElementsByClassName('header');
  $('.hidden').hide();
  $(heading).attr('data-content', ' >');
  $(heading).click(function() {
    elem = this;
    $('.hidden').each(function(i) {
      if (elem.innerHTML == heading.item(i).innerHTML) {
        if (this.style.display == 'block') {
          $(this).slideUp();
          $(heading.item(i)).attr('data-content', ' >');
        } else {
          $(this).slideDown();
          $(heading.item(i)).attr('data-content', ' <');
        }
      } else {
        $(this).slideUp();
        $(heading.item(i)).attr('data-content', ' >');
      }
    });
  });
});

JQuery手风琴在所有div上显示一些内容

2 个答案: