jQuery展开折叠定义列表中的所有DT标签（DL） [英] jQuery expand collapse all DT tags in definition list (DL)

问题描述

这是我尝试完成的一个例子，除了它使用列表（UL和LI）： http://homework.nwsnet.de/news/ea21_turn-nested-lists-into-a-collapsible-tree-with-jquery

我的数据是使用DL，DT和DD标签构建的，如下所示：

 < DL> 
< dt>根< / dt> 
< dd> 
< dl> 
< dt> Coffee< / dt> 
< dd>黑色热饮< / dd> 
< dt>牛奶< / dt> 
< dd>白色冷饮< / dd> 
< dt> Beer< / dt> 
< dd> 
< dl> 
< dt>欧洲< / dt> 
< dd>喜力< / dd> 
< dt>墨西哥< / dt> 
< dd> Corona< / dd> 
< / dl> 
< / dd> 
< / dl> 
< / dd> 
< / dl> 
  

如何使用jQuery将每个DT（及其相应的DD内容）转换为可折叠/可展开节点，即树视图？

解决方案

在最基本的情况下，您可以简单地使用 toggle 点击事件处理程序来执行此操作：

  //单击任何dt元素
 $（'dt'）。click（function（e）{
 //在此dt元素之后的所有dt元素，直到下一个dt元素
 //将隐藏或显示取决于它的当前可见性
 $（this）.nextUntil（'dt'）。toggle（）; 
}）; 
 
 //隐藏所有的dd元素以
 $（'dd'）开头。 
  

当然，您会使用 toggleClass 适当添加其他样式，以及其他效果。请参阅： http://www.jsfiddle.net/yijiang/EA4R5/1/

Here is an example of what I am trying to accomplish, except that it uses lists (UL and LI): http://homework.nwsnet.de/news/ea21_turn-nested-lists-into-a-collapsible-tree-with-jquery

My data is structured using DL, DT and DD tags, like this:

<dl>
  <dt>Root</dt>
  <dd>
    <dl>
      <dt>Coffee</dt>
      <dd>black hot drink</dd>
      <dt>Milk</dt>
      <dd>white cold drink</dd>
      <dt>Beer</dt>
      <dd>
        <dl>
          <dt>European</dt>
          <dd>Heineken</dd>
          <dt>Mexican</dt>
          <dd>Corona</dd>
        </dl>
      </dd>
    </dl>
  </dd>
</dl>

How can I use jQuery to turn each DT (and its corresponding DD content) into a collapsible/expandable node, ie a treeview?

解决方案

At it's most basic, you can simply use toggle with the click event handler to do this:

// When any dt element is clicked
$('dt').click(function(e){
    // All dt elements after this dt element until the next dt element
    // Will be hidden or shown depending on it's current visibility
    $(this).nextUntil('dt').toggle();
});

// Hide all dd elements to start with
$('dd').hide();

You will, of course, want to use toggleClass to add additional styles as appropriately, as well as other effects. See: http://www.jsfiddle.net/yijiang/EA4R5/1/

这篇关于jQuery展开折叠定义列表中的所有DT标签（DL）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！