使用li和dl与jquery级联下拉

Question

我在使用<dl>的常见问题解答中提出了一系列问题。我想使用<ul>和<li>标记将这些标记放入更高级别的类别，这些标记将隐藏<dl>，除非单击它，其功能与我的常规字符当前工作方式相同。我正在努力使这项工作，因为我不熟悉JavaScript。

https://jsfiddle.net/pberard2002/agdrwjno/

任何帮助将不胜感激。

我尝试将<a>标记添加到<li>元素，然后将JS附加到

 $('.accordion > li > dt > a').click(function()

但这不是一次成功的举动。

Answer 1

以下内容适用于嵌套元素。

首先隐藏所有元素，然后将事件监听器附加到所有后代a元素并切换相应的手风琴。

Updated Example

$allPanels = $('.accordion > .accordion, .accordion > dl > dd').hide();

$('.accordion a').on('click', function(e) {
  var $target = $(e.target).next('.accordion').length ? $(e.target).next('.accordion') : $(e.target).parent().next();

  $allPanels.not($(this).closest('.accordion')).slideUp();
  $target[$target.is(':visible') ? 'slideUp' : 'slideDown']();
  e.preventDefault();
});