Question

对于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>

Answer 1

您需要在同一个sub内滑动li元素。

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

演示：Fiddle

Answer 2

试试这个：

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

e.currentTarget会引用您点击的元素，它会搜索相关的.sub。

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

Javascript / JQuery中的多个滑动面板

2 个答案: