Question

目前，我正在使用dt和dd来显示一些数据。我在这里做的最初是将dd设置为display: none，当点击dt时，会显示关联dd。

我的HTML标记是

<dt >
       <h1>click here</h1>
</dt>
<dd style="display: none;">
       <h1> DD Data </h1>
</dd>

<dt >
       <h1>click here</h1>
</dt>
<dd style="display: none;">
       <h1> DD Data </h1>
</dd>

我正在使用的jQuery是

$('dt').live('click', function () {
var dd = $(this).next();

if (!dd.is(':animated')) {
    dd.slideToggle();
    $(this).toggleClass('opened');
}

我现在要做的是允许一次显示一个dd。如果有一个dd正在显示并且如果单击另一个dt，我想关闭当前打开的dd并显示与点击的dt相关联的dd。

任何帮助将不胜感激

Answer 1

你可以这样做：

$('dt').live('click', function () {
    var nextDD = $(this).next('dd');
    $('dd').hide();
    nextDD.show();


});

在这里小提琴：http://jsfiddle.net/ktYgB/

Answer 2

$('dt').live('click', function () {
  var dl = $(this).closest('dl');
  var dd = $(this).next();

  if (!dd.is(':animated')) {
    $('dd', dl).hide(); // hide all dd's first

    dd.slideToggle();
    $(this).toggleClass('opened');
  }
});

切换dd的问题

2 个答案: