下拉菜單與多個父母/子女

我想做一種手風琴類型的菜單，其中所有的第一級頁面佈局，如果你點擊一個父頁面，它會slideDown，然後如果你點擊一個包含更多子元素的頁面，它再次滑落。下拉菜單與多個父母/子女

我有點卡住了，下面是我的下面。首先，因爲slideDown動作被附加到LI上，所以當你嘗試點擊一個也有子節點的子元素時，滑動回來。有什麼方法可以選擇要點擊的錨點，然後滑動下來？

對不起，我的解釋有點混亂，但希望HTML和JS到目前爲止將有助於解釋。一個簡單的點擊和展開菜單。

感謝， [R

HTML：

<ul class="sub-navigation"> 
    <li class="page_item page-item-29 current_page_item parent"><a href="http://richgc.com/dust/bmk/home/clinicallaboratory/">Clinical/Laboratory</a> 
    <ul class="children"> 
     <li class="page_item page-item-40 parent"><a href="http://richgc.com/dust/bmk/home/clinicallaboratory/histopathology/">Histopathology</a> 
     <ul class="children"> 
      <li class="page_item page-item-99"><a href="http://richgc.com/dust/bmk/home/clinicallaboratory/histopathology/test-page/">Test page</a></li> 
     </ul> 
     </li> 
     <li class="page_item page-item-42"><a href="http://richgc.com/dust/bmk/home/clinicallaboratory/bacteriology/">Bacteriology</a></li> 
     <li class="page_item page-item-46"><a href="http://richgc.com/dust/bmk/home/clinicallaboratory/packaging-guidelines/">Packaging Guidelines</a></li> 
     <li class="page_item page-item-44"><a href="http://richgc.com/dust/bmk/home/clinicallaboratory/water-quality-analysis/">Water Quality Analysis</a></li> 
    </ul> 
    </li> 
    <li class="page_item page-item-33 parent"><a href="http://richgc.com/dust/bmk/home/education-and-training/">Education and Training</a> 
    <ul class="children"> 
     <li class="page_item page-item-104"><a href="http://richgc.com/dust/bmk/home/education-and-training/test-page/">Test page</a></li> 
    </ul> 
    </li> 
    <li class="page_item page-item-31"><a href="http://richgc.com/dust/bmk/home/environmental-services/">Environmental Services</a></li> 
    <li class="page_item page-item-35"><a href="http://richgc.com/dust/bmk/home/products/">Products</a></li> 
    <li class="page_item page-item-27"><a href="http://richgc.com/dust/bmk/home/veterinary/">Veterinary</a></li> 
</ul>

的jQuery：

$(".sub-navigation li.parent a").click(function(e) { 
    $(this).parent(".children").slideToggle('fast'); 
});

來源

2012-11-07 John the Painter

嘗試.closest()，而不是.parent()

$(".sub-navigation li.parent a").click(function(e) { 
    e.preventdefault() 
    $(this).closest(".children").slideToggle('fast'); 
});

修訂

$(".sub-navigation li.parent a").click(function(e) { 
    e.preventDefault() 
    $(this).closest('.parent').find("> .children").slideToggle('fast'); 
});

Updated Fiddle

來源

2012-11-07 17:43:03

謝謝，但它仍然沒有工作。我已經設置了一個小提琴，看看這是否有幫助。 http://jsfiddle.net/TDPb4/1/ 錨鏈接應該不起作用，並且如果元素有子節點則充當'＃'。 –

檢查更新後的代碼..我寫的代碼存在問題..我們需要在父代中查找子代，然後執行切換。使用更新後的代碼在第 –

謝謝你。快速問題。頂級父級中有一個子元素，它具有子元素本身（Test），它在打開時顯示。幻燈片需要迭代到最低級別。有任何想法嗎？ –

下拉菜單與多個父母/子女

回答

相關問題