Javascript/JQuery中的多個滑動面板

對Javascript和JQuery來說相當新穎，所以我提前爲我缺乏知識而道歉。話雖如此，我正在試着製作一個帶有導航菜單的頁面，用於多個主題和子主題。當用戶點擊一個主題時，我想要一個滑動的下拉列表顯示子頁面。我的滑塊工作正常，但是當我點擊滑動時，所有菜單都會滑動。我知道這是因爲他們都有同一個班級，所以我正在試圖找到一種方法來進一步確定我想要點擊的幻燈片。爲了CSS設計的緣故，我寧願將它們全部放在同一個班級。我能想到的唯一的其他選擇是爲每個單獨的ID寫出Jquery。我可以做到這一點，但這會相當耗時，所以我希望找到解決辦法。任何人都知道我能做什麼？Javascript/JQuery中的多個滑動面板

$(document).ready(function(){ 
    $(".main").click(function(){ 
     $(".sub").slideToggle("slow"); 
    }); 
});

和我的HTML：

<ul class="sidenav"> 
<li><img src="images/list_plus.png" width="25px" height="25px" class="main" id="intro" /><a href="index.php">Introduction</a> 
    <ul class="sub" id="intro"> 
     <li>Purpose</li> 
     <li>Such and such blah blah.</li> 
    </ul> 
</li> 
<li><img src="images/list_plus.png" width="25px" height="25px" class="main" id="geo" /><a href="geography.php">Geography</a> 
    <ul class="sub" id="geo"> 
    <li>What it is</li> 
    <li>How it is has changed</li> 
    </ul> 
</li> 
</ul>

來源

2013-04-26 user1902509

您需要將相同的li內sub元素滑動。

$(document).ready(function(){ 
    $(".main").click(function(){ 
     $(this).closest('li').find('.sub').slideToggle("slow"); 
    }); 
});

演示：Fiddle

來源

2013-04-26 17:48:12

試試這個：

$(document).ready(function(){ 
    $(".main").click(function(e){ 
     e.preventDefault(); 
     $(e.currentTarget).parent().children('.sub').slideToggle("slow"); 
    }); 
});

e.currentTarget將把你點擊的元素，它會搜索相關.sub。

這是小提琴：http://jsfiddle.net/rBUDa/

來源

2013-04-26 19:12:52

Javascript/JQuery中的多個滑動面板

回答

相關問題