[英]jQuery stop all elements with the same class opening on click when element is a parent
I have written this function as a click event callback on a button, which when clicked toggles the class to provide a dropdown. 我已经将此功能编写为按钮上的click事件回调,单击该按钮时将切换该类以提供下拉菜单。 This works if the dropdown element is next, but not if the element is outside of the clicked element's parent.
如果下拉列表元素是下一个,则此方法有效,但如果该元素位于被单击元素的父元素之外,则此方法无效。 The problem is is that I have multiple buttons on the same page that have the same functionality, and they all fire when one is clicked:
问题是我在同一页面上有多个具有相同功能的按钮,并且在单击一个按钮时它们都会触发:
https://jsfiddle.net/21xj96up/7/ https://jsfiddle.net/21xj96up/7/
$('.direction-button').on('click', function() { $(this).next('.direction-dropdown').toggleClass('active'); });
.fade-in { visibility: hidden; opacity: 0; transition: visibility 0s, opacity .3s ease-in-out, all .3s ease-in-out; } .active { visibility: visible; opacity: 1; transform: translate(0, 0); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <div class="contact-card"> <div class="contact-directions"> <a href="#" title="#" class="direction-button link-button animate-after">Directions</a> </div> <!-- end .contact-directions --> <div class="contact-info"></div> <!-- .contact-info --> <div class="contact-partner"></div> <!-- end .contact-info --> </div> <!-- end .contact-card --> <div class="direction-dropdown fade-in"> <p>Display #1</p> </div> <div class="contact-card"> <div class="contact-directions"> <a href="#" title="#" class="direction-button link-button animate-after">Directions</a> </div> <!-- end .contact-directions --> <div class="contact-info"></div> <!-- .contact-info --> <div class="contact-partner"></div> <!-- end .contact-info --> </div> <!-- end .contact-card --> <div class="direction-dropdown fade-in"> <p>Display #1</p> </div>
Any and all help greatly appreciated :) 任何和所有帮助非常感谢:)
Check if it has a "parent-container" named contact-card
if so take next from that one else do what you did already: 检查它是否有一个名为“
contact-card
”的“父容器”,如果是,则从另一个继续执行您已做的事情:
https://jsfiddle.net/21xj96up/12/ https://jsfiddle.net/21xj96up/12/
$('.direction-button').on('click', function(){
if( 1 === $(this).closest('.contact-card').next('.direction-dropdown').length) {
$(this).closest('.contact-card').next('.direction-dropdown').toggleClass('active');
} else {
$(this).next('.direction-dropdown').toggleClass('active');
}
});
Update with "shorter" version https://jsfiddle.net/21xj96up/21/ Now this is even a bit better cause we use the same 使用“更短”版本进行更新 https://jsfiddle.net/21xj96up/21/现在,这甚至更好一点,因为我们使用相同的版本
$(this).closest('.contact-card').next('.direction-dropdown')
twice. 两次。 So we can save it to a variable and then use the variable.
因此,我们可以将其保存到变量中,然后使用该变量。
$('.direction-button').on('click', function(){
var parentElement = $(this).closest('.contact-card').next('.direction-dropdown');
if( 1 === parentElement.length) {
parentElement.toggleClass('active');
} else {
$(this).next('.direction-dropdown').toggleClass('active');
}
});
I wold suggest this code, since selection conditions are not the same : 我会建议使用此代码,因为选择条件不同:
$('.direction-button').on('click', function(){
var b = $(this);
if(b.parents('div').length>0) {
b.parents('div').next('.direction-dropdown').toggleClass('active');
} else {
b.next('.direction-dropdown').toggleClass('active');
}
});
In cases like those, when there is an inconsistent element-hierarchy, you can work with data-attributes and IDs, which makes toggler and content hierarchy-independent. 在这种情况下,当元素层次结构不一致时,可以使用数据属性和ID,这使切换器和内容层次结构独立。
Attribute for the Toggler: 切换器的属性:
data-toggle-target="display1"
ID for the target 目标的ID
`id="display1"`
The jQuery-Code jQuery代码
$( '#' + $(this).attr('data-toggle-target')).toggleClass('active');
https://jsfiddle.net/s57zk5hb/ https://jsfiddle.net/s57zk5hb/
On your code, since $(this)
is inside the context of $('.direction-button')
, this really means the "direction-button". 在您的代码上,因为
$(this)
在$('.direction-button')
的上下文内,所以这实际上意味着“ direction-button”。 There is no next "direction-dropdown" present for "direction-button" in the same level of "direction-button". 在“方向按钮”的同一级别中,不存在“方向按钮”的下一个“方向下拉菜单”。
div
div
direction button
<it looks for the item here>
/div
/div
<item is actually here>
you can try, 你可以试试,
$(this).parent().parent().next().toggleClass('active');
to achieve the functionality in the second case. 在第二种情况下实现功能。
It would obviously be better if the structure were consistent. 如果结构一致,显然会更好。 Assuming that you have little control over that, though, would mean you also have little control over additional classes or ids that would provide a better solution.
但是,假设您对此几乎没有控制,则意味着您对其他类或id的控制也很少,而这些其他类或id将提供更好的解决方案。 In light of this, you can find the index of the current button in a collection of all the buttons and dropdowns and find the next dropdown in that list.
鉴于此,您可以在所有按钮和下拉列表的集合中找到当前按钮的索引,并在该列表中找到下一个下拉列表。
var idx = $(this).index('.direction-button, .direction-dropdown');
$('.direction-button, .direction-dropdown')
.slice(idx)
.filter('.direction-dropdown')
.first()
.toggleClass('active');
Like so: https://jsfiddle.net/j7h32w90/1/ 像这样: https : //jsfiddle.net/j7h32w90/1/
This will work in nearly any DOM structure. 这几乎可以在任何DOM结构中使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.