显示父节点 UL，对于根父节点，显示 UL 和 LI 节点

Display parent UL and for the root parent both UL and LI node

本文关键字：显示 UL 父节点 节点 LI 于根      更新时间：2023-09-26
<ul id="ul_Book1">
<li  id="li_Book1"> Book1 </li>
<ul id="ul_Chap1">
    <li id= "li_Chap1"> Chapter 1</li>
    <ul>
       <li id="li_Sect11"  > Section 1.1 </li>
       <li id="li_Sect12"  > Section 1.2 </li>
       <li id="li_Sect13"  > Section 1.3 </li>
       </ul>
</ul>
<ul id="ul_Chap2">
    <LI  id= "li_Chap2"> Chapter 2</LI>
    <ul>
       <li  id="li_Sect21"  > Section 2.1 </li>
       <li  id="li_Sect22"  > Section 2.2 </li>
       <li  id="li_Sect23"  > Section 2.3 </li>
    </ul>
</ul>
<ul id="ul_Chap3">
    <li  id= "li_Chap3"> Chapter 3</li>
    <ul>
       <li  id="li_Sect31"  > Section 3.1 </li>
       <li  id="li_Sect32"  > Section 3.2 </li>
       <li  id="li_Sect33"  > Section 3.3 </li>
    </ul>
</ul>

函数菜单显示路径(li_id( {

var idVal = li_id;
var $obj = $('li').filter(function () { return $(this).attr('id') == idVal; }).parents();
$($obj.get().reverse()).each(function () {
    if ($(this).is("li")) {
        $(this).find('li').each(function () {
            $(this).show();
        });
        $(this).find('Ul').each(function () {
            $(this).show();
        });
    }
});

}

当选择一个 LI 节点时，比如说"第 3.2 节"，我只想展开/显示"Book1 - 第 3 章 - 第 3.2 节"，而 Book1 下的其余 UL 节点不应展开。

但是我的功能menuDisplayPath(li_id(正在扩展Book1下的所有UL，并且还显示所有LI。我在函数中缺少什么。

假设所有内容都在加载时展开。

首先，我更正了许多缺少的双引号和多余的空格......
所以这是你的 HTML：

<input type="reset" id="reset" value="Expand all">
<ul id="ul_Book1">
    <li id="li_Book1"> Book1 </li>
    <ul id="ul_Chap1">
        <li id="li_Chap1"> Chapter 1</li>
        <ul>
          <li id="li_Sect11"> Section 1.1 </li>
          <li id="li_Sect12"> Section 1.2 </li>
          <li id="li_Sect13"> Section 1.3 </li>
        </ul>
    </ul>
    <ul id="ul_Chap2">
        <li id="li_Chap2"> Chapter 2</li>
        <ul>
          <li id="li_Sect21"> Section 2.1 </li>
          <li id="li_Sect22"> Section 2.2 </li>
          <li id="li_Sect23"> Section 2.3 </li>
        </ul>
    </ul>
    <ul id="ul_Chap3">
        <li id="li_Chap3"> Chapter 3</li>
        <ul>
          <li id="li_Sect31"> Section 3.1 </li>
          <li id="li_Sect32"> Section 3.2 </li>
          <li id="li_Sect33"> Section 3.3 </li>
        </ul>
    </ul>
</ul>

这是在单击具有部分ID的li时隐藏其他章节的方法：

$(document).ready(function(){
    $("#ul_Book1").on("click","ul ul li", function(){
        $(this).parent().parent().siblings("ul").each(function(){
            $(this).hide(); // Hides all other chapter
        });
    });
    $("#reset").on("click",function(){
        $("#ul_Book1").children("ul").each(function(){
            $(this).show();
        });
    });
});

小提琴

现在。。。无法告诉您如何显示<section>，因为我没有看到相关的 HTML。

以下内容对我有用：

function open($li) {
  $('.content').hide();  
  $li.children().show();
  if ($li.hasClass('section')) $li.parent().parent().children().show();
}
 // test driver
$(document).ready(function() {
  $('li').click(function (e) { open($(this)); e.stopPropagation(); });
});
.content {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="book">
  <li class="chapter">Chapter One
    <ul class="chapter content">
      <li class="section">Section One<br><i class="content">1.1 contents</i></li>
      <li class="section">Section Two<br><i class="content">1.2 contents</i></li>
    </ul>
  </li>
  <li class="chapter">Chapter Two
    <ul class="chapter content">
      <li class="section">Section One<br><i class="content">2.1 contents</i></li>
      <li class="section">Section Two<br><i class="content">2.2 contents</i></li>
     </ul>
  </li>
</ul>

基本上，您将要打开的部分元素放在open($li)函数中。

您也应该只将<li>元素放在<ul>元素中。我希望这就是你想要的。

相关文章：