Question

我的过滤器按照以下代码段按月显示数据

我想关闭/隐藏具有类“children”的ul，当点击“nowShowing”类的任何li时。我在下面尝试但是仍然无法正常工作时帮助识别事件

  $('.children').click(function() {
    children.hide();
  })

<ul class="filters">
  <li class="parent active"><a href="javascript:void(0);" class="customfilters">Filter by Month</a>
    <ul class="children">
      <li class="nowShowing"><a class="all" id="all2" href="#" data-filter="*">All</a></li>
      <li class="nowShowing"><a href="#" data-filter=".June" class="June">June</a></li>
      <li class="nowShowing"><a href="#" data-filter=".July" class="July">July</a></li>
      <li class="nowShowing"><a href="#" data-filter=".August" class="August">August</a></li>
      <li class="nowShowing"><a href="#" data-filter=".September" class="September">September</a></li>
    </ul>
  </li>
</ul>

Answer 1

使用.closest隐藏

 $('.nowShowing').click(function(){
  $(this).closest('.children').hide();
});
$('.customfilters').click(function(){
  $('.children').show();
});

演示：https://jsfiddle.net/gaq23jbL/6/

Answer 2

你可以这样做：

$('.nowShowing').click(function() {
    $(this).closest('.children').hide();
});

例如：

＆＃13;

$('.nowShowing').click(function() {
    $(this).closest(".children").hide();
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="filters">
  <li class="parent active"><a href="javascript:void(0);" class="customfilters">Filter by Month</a>
    <ul class="children">
      <li class="nowShowing"><a class="all" id="all2" href="#" data-filter="*">All</a></li>
      <li class="nowShowing"><a href="#" data-filter=".June" class="June">June</a></li>
      <li class="nowShowing"><a href="#" data-filter=".July" class="July">July</a></li>
      <li class="nowShowing"><a href="#" data-filter=".August" class="August">August</a></li>
      <li class="nowShowing"><a href="#" data-filter=".September" class="September">September</a></li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 3

使用.closest

＆＃13;

  $('.nowShowing').click(function() {
    $(this).closest(".children").hide();
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="filters">
  <li class="parent active"><a href="javascript:void(0);" class="customfilters">Filter by Month</a>
    <ul class="children">
      <li class="nowShowing"><a class="all" id="all2" href="#" data-filter="*">All</a></li>
      <li class="nowShowing"><a href="#" data-filter=".June" class="June">June</a></li>
      <li class="nowShowing"><a href="#" data-filter=".July" class="July">July</a></li>
      <li class="nowShowing"><a href="#" data-filter=".August" class="August">August</a></li>
      <li class="nowShowing"><a href="#" data-filter=".September" class="September">September</a></li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 4

你可以这样做。您可以选择nowShowing元素。

，而不是访问父级

$('.nowShowing').on('click', function(){
   $(this).parent().css('display','none');
 });

Working example

点击任何li时隐藏ul

4 个答案: