Question

<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>

function menuDisplayPath（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节点时，请说＆＃34; 第3.2节＆＃34; ，我想扩展/仅展示＆＃34; Book1--第3章 - 第3.2节＆＃34; Book1下的其他UL节点不应该扩展。

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

Answer 1

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

首先，我更正了许多丢失的双引号和额外空格...
所以这是你的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>

以下是点击li并带有部分ID的其他章节的方法：

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

Fiddle

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

Answer 2

以下对我有用：

＆＃13;

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

＆＃13;

.content {
  display: none;
}

＆＃13;

<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>

＆＃13;

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

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

显示父UL和根父亲UL和LI节点

2 个答案: