0

我正在尝试使用 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();
})

单击 a 时它将切换dd内容dt a，但我也想关闭另一个打开dd的内容。

4

6 回答 6

1

点击隐藏

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

演示

于 2013-08-05T09:13:58.690 回答
1

我建议为包含相应类的元素提供一个类，以便您可以轻松找到手风琴的“根”：

<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()），您可以使您的手风琴实现更加灵活。

于 2013-08-05T09:13:59.650 回答
0

嗨试试这样，

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

您可以accordion使用Jquery Ui

http://jqueryui.com/accordion/

于 2013-08-05T09:16:17.450 回答
0

试试下面的代码。

$('a').on('click', function(){
    $(this).parent().parent().find('dd').stop(true,true).slideUp(); 
    $(this).parent().next('dd').stop(true,true).slideDown();    
});
于 2013-08-05T09:18:21.107 回答
0

您可以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>

见那里的例子。

于 2013-08-05T09:20:39.110 回答
0

在onclick你hide all之前toggling.

$('dd').hide();

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

})

演示小提琴

于 2013-08-05T09:13:12.990 回答