0

对 Javascript 和 JQuery 来说相当新，所以我提前为我缺乏知识道歉。话虽这么说，我正在尝试制作一个带有多个主题和子主题的导航菜单的页面。当用户点击一个主题时，我希望有一个滑动下拉列表显示子页面。我的滑块工作正常，但是当我单击滑动时，所有菜单都会滑动。我知道这是因为它们都有相同的类，所以我试图找到一种方法来进一步识别我想要单击的幻灯片。为了 CSS 设计，我宁愿让它们都保持在同一个类中。我能想到的唯一其他选择是为每个单独的 ID 写出 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>
4

2 回答 2

0

尝试这个 ：

$(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-26T19:12:52.813 回答
0

您需要sub在同一li.

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

演示：小提琴

于 2013-04-26T17:48:12.783 回答