Question

我有一个下拉菜单。我希望它是动态的，所以我只能告诉li（在nav中）它是一个下拉列表然后给它一个列表，然后是下拉内容。问题是，当您单击.dropdown类的链接时，它会显示所有具有.dropdown-content类的元素。想知道哪个智能选择器可以在这里工作吗？

我的HTML：

    <li><a class="dropdown" href="#">Gallery</a>
        <ul class="dropdown-content">
            <li><a  href="#">Photos on me</a></li>
            <li><a  href="#">Photos of me</a></li>
            <li><a  href="#">Photos with me</a></li>
        </ul>
    </li>
    <li><a class="dropdown" href="#">Blog</a>
        <ul class="dropdown-content">
            <li><a  href="#">Photos on me</a></li>
            <li><a  href="#">Photos of me</a></li>
            <li><a  href="#">Photos with me</a></li>
        </ul>
    </li>

我的js：

var main = function() {
    $('.dropdown').click(function(){
        $('.dropdown + .dropdown-content').toggle(200);
    });
}

Answer 1

获取发生了click事件的元素，然后从中找到您要查找的兄弟姐妹类。

$('.dropdown').click(function(){
    $(this).siblings('.dropdown-content').toggle(200);
});

OR

$('.dropdown').click(function(){
    $(this).next().toggle(200);
});

Working Fiddle

Answer 2

只需在代码中加入data和id即可。这将解决您的问题。

jsbin.com上的JS Bin

＆＃13;

(function() {
    $('.dropdown').click(function(e){
        var id = $(this).data('toggle');
        $('#' + id).toggle();
    });
}());

＆＃13;

.dropdown-content {
  display: none;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <ul>
    <li><a class="dropdown" href="#" data-toggle="first">Gallery</a>
        <ul class="dropdown-content" id="first">
            <li><a  href="#">Photos on me</a></li>
            <li><a  href="#">Photos of me</a></li>
            <li><a  href="#">Photos with me</a></li>
        </ul>
    </li>
    <li><a class="dropdown" href="#" data-toggle="second">Blog</a>
        <ul class="dropdown-content" id="second">
            <li><a  href="#">Photos on me</a></li>
            <li><a  href="#">Photos of me</a></li>
            <li><a  href="#">Photos with me</a></li>
        </ul>
    </li>
  </ul>
</body>
</html>

＆＃13;

如何在课后只选择第一个元素？

2 个答案: