javascript - 使用 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 元素并切换相应的 Accordion 。

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