仅打开单击的下拉列表

Question

我正在尝试下拉列表。这是我的代码：FIDDLE

然而，它会在单击时打开每个下拉列表，而不是仅单击已下拉的下拉列表。我该如何隔离它？这是完整的JS：

$(function () {
    $('.click-nav > ul').toggleClass('no-js js');
    $('.click-nav .js ul').hide();
    $('.click-nav .js').click(function (e) {
        $('.click-nav .js ul').toggle();
        $('.clicker').toggleClass('active');
        e.stopPropagation();
    });
    $(document).click(function () {
        if ($('.click-nav .js ul').is(':visible')) {
            $('.click-nav .js ul', this).slideUp();
            $('.clicker').removeClass('active');
        }
    });
});

Answer 1

目前点击整个ul元素。在.js li上添加点击事件，因为导航元素为li。，并使用this获取当前相关元素。

$('.click-nav .js li').click(function (e) {
    $('ul',this).toggle();
    $('.clicker',this).toggleClass('active');
    e.stopPropagation();
});

<强> Updated Fiddle

Answer 2

你可以尝试这样的事情

$(function() {
  $('.click-nav > ul').toggleClass('no-js js');
  $('.click-nav .js ul').hide();
  // add li to findout which one is clicked
  $('.click-nav .js li').click(function(e) {
    // use this to find ul inside the clicked li
    $(this).find('ul').toggle()
      .end().find('.clicker').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('.click-nav .js ul').is(':visible')) {
      $('.click-nav .js ul', this).slideUp();
      $('.clicker').removeClass('active');
    }
  });
});

* {
  margin: 0;
  padding: 0;
}
.click-nav ul {
  position: relative;
  display: inline-block;
}
.click-nav ul li {
  position: relative;
  list-style: none;
  cursor: pointer;
  display: inline-block;
}
.click-nav ul li ul {
  position: absolute;
  left: 0;
  right: 0;
}
.click-nav ul .clicker {
  position: relative;
  color: black;
}
.click-nav ul .clicker:hover,
.click-nav ul .active {
  background: #196F9A;
}
.click-nav ul li a {
  display: block;
  padding: 8px 10px;
  background: #FFF;
  color: #333;
  text-decoration: none;
}
.click-nav ul li a:hover {
  background: #F2F2F2;
}
/* Fallbacks */

.click-nav .no-js ul {
  display: none;
}
.click-nav .no-js:hover ul {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="click-nav">
  <ul class="no-js">
    <li> <a href="#" class="clicker">Any Time</a>
      <ul>
        <li><a href="#">Any Time</a>

        </li>
        <li><a href="#">Past 3 days</a>

        </li>
        <li><a href="#">Past 5 days</a>

        </li>
      </ul>
    </li>
    <li> <a href="#" class="clicker">Test</a>
      <ul>
        <li><a href="#">Any Time</a>

        </li>
        <li><a href="#">Past 3 days</a>

        </li>
        <li><a href="#">Past 5 days</a>

        </li>
      </ul>
    </li>
  </ul>
</div>