使用jQuery切換無序列表項目

我在一個項目中，非HTML精明的用戶將改變所見即所得編輯器中的網站內容。一個頁面涉及具有大量內容的無序列表。我希望能夠切換內容，但我遇到了問題。使用jQuery切換無序列表項目

這裏有一個的jsfiddle與我的問題重現：http://jsfiddle.net/eKzbY/

而且我的javascript：

$(document).ready(function() { 
    $('.descrip ul ul').hide(); 
    $('.descrip ul li').click(function() { 
     $(this).children('.subLink').toggle('slow'); 
    }); 
    $('.descrip li:has(ul)').addClass('myLink'); 
    $('.descrip ul ul').addClass('subLink'); 
});

您可以切換下的「2」好了內容，但是當你點擊「2.1」來切換其內容它會切換它下面的內容和「2」下面的內容。我相信這是因爲點擊「2.1」同時擊中了兩個li，同時觸發兩個li。我會提供所有的課程，但這些用戶不知道HTML，因此在添加更多內容時可能會遇到困難。

我一直盯着這太久了。任何人都有解決方案/更好的主意？

來源

2013-06-24 StoneRanger

問題是，您正在爲每個「li」分配「click」事件。當內部「李」被點擊時，父母也是如此。你可以用jQuery的stopPropagation來防止這種情況。

使用e.stopPropagation();

像這樣：

：

$(document).ready(function() { 
    $('.descrip ul ul').hide(); 
    $('.descrip ul li').click(function(e) { // inserted callback param "e" meaning "event" 
     e.stopPropagation(); // stop click from bubbling up 
     $(this).children('.subLink').toggle('slow'); 
    }); 
    $('.descrip li:has(ul)').addClass('myLink'); 
    $('.descrip ul ul').addClass('subLink'); 
});

一些舊菜單礦的例子

來源

2013-06-24 19:21:42 SpYk3HH

+1幾乎是唯一的出路。很高興看到其他解決方案。 –

我發現了一個解決方案 - 基於SpYk3HH的示例 - 提供了所需的功能，即使<li>是超鏈接。

的click事件被綁定到li而不是li自身內部創建一個子元素：

$(document).ready(function() { 
 
     $("ul > li > ul").hide(); 
 

 
     $("ul > li").each(function(i) { 
 
      if ($(this).children("ul").length > 0) { 
 
       $(this).css("cursor", "pointer").children("ul").before($("<sup class='toggler' />").text(" (+)")); 
 
      } 
 
      else { 
 
       $(this).css("cursor", "default"); 
 
      }; 
 
     }); 
 

 
     $("ul > li > .toggler").click(function(e) { 
 
      e.stopPropagation(); 
 
      
 
      // was visible 
 
      if (!$(this).siblings("ul").is(":visible")) { 
 
       $(this).text(" (-)"); 
 
       $(this).parent("li").children("ul").show(); 
 
      } else { 
 
       $(this).text(" (+)"); 
 
       $(this).parent("li").children("ul").hide(); 
 
      }; 
 
     }); 
 
    });

ul > li > ul { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="descrip"> 
 
    <ul> 
 
     <li>1 
 
      <ul> 
 
       <li>1.1</li> 
 
       <li>1.2</li> 
 
      </ul> 
 
     </li> 
 
     <li>2 
 
      <ul> 
 
       <li>2.1 
 
        <ul> 
 
         <li>2.1.1</li> 
 
         <li>2.1.2</li> 
 
        </ul> 
 
       </li> 
 
       <li>2.2</li> 
 
      </ul> 
 
     </li> 
 
     <li>3</li> 
 
    </ul> 
 
</div>

來源

2018-01-16 19:59:22

使用jQuery切換無序列表項目

回答

相關問題