$eventTarget.is($(this)) 不工作
$eventTarget.is($(this)) not working
我做了一个样本手风琴。如果一个选项卡被点击,它的兄弟姐妹应该被关闭;换句话说,如果事件目标是当前选项卡(选项卡是 <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>
您可以通过简单地检索与单击的 header
相关的 .slide
元素并对其调用 slideToggle()
,然后调用 slideUp()
在所有剩余的 .slide
元素上。试试这个:
$('#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>
我做了一个样本手风琴。如果一个选项卡被点击,它的兄弟姐妹应该被关闭;换句话说,如果事件目标是当前选项卡(选项卡是 <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>
您可以通过简单地检索与单击的 header
相关的 .slide
元素并对其调用 slideToggle()
,然后调用 slideUp()
在所有剩余的 .slide
元素上。试试这个:
$('#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>