jQuery развернуть свернуть все теги DT в списке определений (DL)

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

У самого человека Джона Резига уже есть видео, объясняющее, как создать такое меню, используя теги DL, DT и DD. Проверить:

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