Question

我正在尝试使用jQuery自己构建手风琴。这很简单，但我做不到。

这是我的HTML

<div id="three">
  <dt><a href="#">click one</a></dt>
  <dd>content one</dd>
  <dt><a href="#">click two</a></dt>
  <dd>content two</dd>
  <dt><a href="#">click three</a></dt>
  <dd>content three</dd>
</div>

这是我的剧本

$('dd').hide();
$('a').on('click', function(){
    $(this).parent().next('dd').toggle('slow', function() {
    });
$(this).parent().siblings('dd').hide();
})

点击dd时，它会切换dt a内容，但我也要关闭另一个已打开的dd。

Answer 1

点击隐藏

$('dd').hide();
$('a').on('click', function(){ $(this).parent().next('dd').toggle('slow').siblings('dd').hide('slow');
})

DEMO

Answer 2

我建议给出包含相应类的元素，以便您可以轻松找到手风琴的“根”：

<div id="three" class="accordion">

然后，您可以轻松找到其中的所有dd元素并隐藏所有这些元素，但会隐藏所有元素：

$('a').on('click', function(){
    var $dd = $(this).parent().next('dd');
    // hide all others
    $(this).closest('.accordion').find('dd').not($dd).hide();
    $dd.toggle('slow');
});

一般情况下，如果您使用类而不是使用元素（例如.accordion-header，.accordion-content或类似的东西），并使用“相对”DOM遍历（.closest）代替直接遍历（$(this).parent()），你可以使你的手风琴实现更灵活。

Answer 3

在onclick之前的hide all toggling. <{1}}

$('dd').hide();

$('a').on('click', function(){
    $('dd').hide();
    $(this).parent().next('dd').toggle('slow', function() {
    });

})

Demo Fiddle

Answer 4

HI试试这个，

 $(function() {
$( "#three" ).accordion();
});

您可以使用accordion

使用Jquery Ui

http://jqueryui.com/accordion/

Answer 5

尝试使用以下代码。

$('a').on('click', function(){
    $(this).parent().parent().find('dd').stop(true,true).slideUp(); 
    $(this).parent().next('dd').stop(true,true).slideDown();    
});

Answer 6

您可以使用this链接中的JQuery UI Accordion。并使用它：

$(function() {
    $("#accordion").accordion();
});

在这个结构上：

<div id="accordion">
  <h3>click one</h3>
  <div><p>content one</p></div>
  <h3>click two</h3>
  <div><p>content two</p></div>
  <h3>click three</h3>
  <div><p>content three</p></div>
</div>

参见示例there。

我的jquery简单手风琴卡住了

6 个答案: