沒有列表元素的jquery slidetoggle列表觸發效果

Question

我對html/js/css的一切都很陌生。現在我需要一個列表，所以我決定使用可以滑動的列表。我看着它，發現如何重新創建效果（下面的代碼）：

 var subMenu = jQuery(".tableContainer ul li ul li"); 
     var linkClick = jQuery(".tableContainer ul li").filter(":has(ul)"); 

     linkClick.click(function() { 
      $(this).find('ul li').slideToggle(200); 
     }); 

（如果你想知道的2 UL和李，那是因爲我想在另一個列表清單，但沒有按t改變了這個問題，所以我沒有把它包括在我的解釋中） 由於我對這個主題很陌生，我只理解了70％的情況。但對於我的項目，我需要使用列表中的元素（隱藏的和滑下後可見的元素）。我想要做的事情需要點擊它們，比如點擊時突出顯示，但是現在我遇到了問題，即我發佈的代碼使得滑動效果不僅被標題觸發，而且被元素觸發。所以我不能點擊元素而沒有通過相同的點擊來最小化列表（顯然這些元素再次被隱藏）。我希望你們能向我解釋如何讓這個功能只能由頭對象觸發，而不能由整個列表元素（頭和擴展列表）觸發。

Answer 1

看幻燈片效果不僅被標題觸發，而且還被元素觸發，這是因爲事件冒泡的概念基本上意味着在點擊事件的情況下，如果您單擊了一個子元素，事件會默認冒泡到父元素樹直到文檔級別觸發任何已註冊的事件處理程序。所以當你單擊該元素單擊標題，所以你需要添加另一個子元素和處理一下就可以了這樣的事情： -

<div class="tableContainer"> 
    <ul> 
    <li> <span>menu 1</span> 
    <ul> 
     <li>link 1</li> 
    </ul> 
    </li> 
    <li><span> menu 2</span> 
    <ul> 
     <li>link 2</li> 
    </ul> 
    </li> 
    <li><span> menu 3</span> 
    <ul> 
     <li>link 3</li> 
    </ul> 
    </li> 
    <li> <span>menu 4</span> 
    <ul> 
     <li>link 4</li> 
    </ul> 
    </li> 
    </ul> 
    </div> 


$(function() { 
    var subMenu = jQuery(".tableContainer ul li ul li"); 
    var linkClick = jQuery(".tableContainer span"); 
    console.log(linkClick.length); 

    linkClick.click(function() { 
    console.log('clicked'); 
    $(this).siblings('ul').slideToggle(200); 
    }); 
}); 

全部工作實例Here

希望這回答了你題。