Question

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

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

<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>

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

Answer 1

这是最基本的，您只需使用toggle click事件处理程序即可：

// 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();

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

Answer 2

该男子自己John Resig已经有一段视频，解释了如何使用DL，DT和DD标签创建这样的菜单。退房：

http://15daysofjquery.com/jquery-online-movie-tutorial-by-john-resig/29/

jQuery展开折叠定义列表（DL）中的所有DT标签

2 个答案: