javascript - jQuery 在 h 元素之后折叠 ul，当前元素除外

Question

对于这个网站，我有一个菜单，由 markdown 通过 MIIS 生成

<h4><a>title</a></h4>
<ul>
  <li><a>foo</a></li>
  <li> <a>foo</a>
    <ul>
      <li><a>sub</a></li>
    </ul>
  </li>
 <li><a>foo</a></li>
</ul>

<h4><a>other title</a></h4>

<ul>
  <li><a>other…</a></li>
  ...
</ul>

默认情况下，我只想显示 h4 标题，而不是下面的列表。只有当你点击一个标题时，它才会显示 ul 内容(只显示下面的第一级)。单击另一个标题应隐藏其他部分的其他 ul 内容并在标题下方显示当前 ul。

我目前被 common.js 中的折叠代码困住了，一切总是折叠的:

$('.miis-toc > ul > li > a').filter(function(){
        return ($(this).attr('href') != '');
    }).parent().find('ul > li').hide();

    $('.miis-toc > h4').filter(function(){
          return ($(this).attr('href') != '');
     }).parent().find('ul').hide();


currLink.parentsUntil('.miis-toc > ul').last().find('li').show()

Answer 1

如果我正确理解你的问题，并且理解你的菜单 HTML 的定义和结构方式，那么一个可能的解决方案可能是像这样修改你的 jQuery:

// Hide all ul sublists that are direct children of .miis-toc by
// default
$('> ul', '.miis-toc').hide()

// Listen for click event on h4 elements that are directly under
// .miis-toc
$('> h4', '.miis-toc').click(function() {
  
  // Hide all ul sublists that are direct children of .miis-toc
  $('> ul', '.miis-toc').hide()
  
  // Show the ul sublist that is "after" the h4 that has been clicked
  // (ie this)
  $('+ ul', this).show()
  
  // Prevent default click behaviour
  return false; 
})

请看completed example of this solution on jsFiddle

更新的答案

对于以下评论中阐明的新细节，以下解决方案应满足所有要求。请注意，JS 代码将根据 URL 匹配(即基于浏览器 URL 路径名)“预切换”菜单 UL 或子 UL。

您需要按如下方式更新 HTML:

<div class="miis-toc">
  <h4><a href="/title/">title</a></h4>
  <!-- If path name is /title/, entire tree to this point will be 
       preopened to here -->
  <ul>
    <li><a>foo</a></li>
    <li><a href="/foo/">foo</a> 
      <!-- If path name is /foo/, entire tree to this point will 
           be preopened to here -->
      <ul>
        <li><a>sub</a></li>
      </ul>
    </li>
   <li><a>foo</a></li>
  </ul>

  <h4><a>other title</a></h4>
  <ul>
    <li><a>other…</a></li>
    ...
  </ul>
</div>

你更新后的 jQuery 如下:

// This code block sets up the menu when the page first loads, and
// decides which UL or UL sublist to display based on current URL
{
    // Hide all UL's that are under .miis-toc
  $('ul', '.miis-toc').hide()
  
  // Look for a UL sublist after an anchor with href matching our 
  // browsers current pathname
  var node = $('a[href="'+location.pathname+'"] + ul', '.miis-toc')

  // If not found, look for a UL after an h4 with child anchors href
  // matching our browsers current pathname
  if(node.length === 0) {
    var a = $('h4 a[href="'+location.pathname+'"]', '.miis-toc')
    node = $('+ ul', a.parent())
  }

  // If we have found a UL or UL sublist, we need to walk back up the 
  // "menu tree" and "show" each node (ie UL and/or UL sublist)
  if(node.length) {
    var parent = node 
    // When we reach to top of the menu (ie .miis-toc), terminate the
    // loop
    while(!parent.hasClass('miis-toc')) {
      parent.show()
      parent = parent.parent() 
    }
  }
}

// Listen for click event on h4 and nested li > a elements under
// .miis-toc
$('h4, li > a', '.miis-toc').click(function(event) {
  
  // Toggle (show/hide) adjacent ul sublist when clicked
  $('+ ul', this).toggle()
  
  // Prevent default click behaviour
  return false; 
})