$eventTarget.is($(this)) 不工作答案

【问题标题】：$eventTarget.is($(this)) not working$eventTarget.is($(this)) 不工作
【发布时间】：2016-12-30 20:37:15
【问题描述】：

我做了一个手风琴样品。如果一个选项卡被点击，它的兄弟应该关闭；换句话说，如果事件目标是当前选项卡（选项卡是<header>s），则只能打开一个选项卡。我在代码中所做的是测试事件目标是否是当前选项卡，即$(this)，但它不起作用，没有任何改变。我该如何解决这个问题？

var $header = $('#accordions').find('header');

$header.on('click', function(e) {
  var $eventTarget = $(e.target);

  if (!$eventTarget.is($(this))) {
    $(this).siblings('.slide').slideUp(300);
  } else {
    $(this).siblings('.slide').slideToggle(300);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="accordions">
  <div class="accordion">
    <header>Slide 1</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion">
    <header>Slide 2</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion">
    <header>Slide 3</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion">
    <header>Slide 4</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</section>

【问题讨论】：

标签： jquery targeting

【解决方案1】：

您可以通过简单地检索与单击的header 相关的.slide 元素并在其上调用slideToggle()，然后在所有剩余的.slide 上调用slideUp() 来修复您的代码并使其更简洁元素。试试这个：

$('#accordions header').on('click', function(e) {
  var $target = $(this).next('.slide').slideToggle(300);
  $('.slide').not($target).slideUp(300);
});

header { font-weight: bold; }
.slide { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="accordions">
  <div class="accordion">
    <header>Slide 1</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion">
    <header>Slide 2</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion">
    <header>Slide 3</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion">
    <header>Slide 4</header>
    <div class="slide">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</section>

【讨论】：