[英]How to toggle some elements using jquery/javascript?
There are multiple words like this: 有多个这样的词:
word1 word2 word3 ...
Each word in an <a>
tag is associated with 1 to 3 <li>
tags. <a>
标记中的每个单词都与1到3个<li>
标记相关联。 I need some actions to happen if the associated <a>
tag is clicked. 如果单击关联的
<a>
标记,我需要采取一些措施。
Here are my codes: 这是我的代码:
HTML 的HTML
<a>word1</a>
<div class="sents">
<li>This is a first example</li>
</div>
<a>word2</a>
<div class="sents">
<li>This is a second example</li>
<li>This is a second example</li>
</div>
<a>word3</a>
<div class="sents">
<li>This is a third example</li>
<li>This is a third example</li>
<li>This is a third example</li>
</div>
Script 脚本
$(document).ready(function () {
$('a').click(function () {
$('a').next('div').removeClass('active');
$(this).next('div').toggleClass('active');
});
});
CSS 的CSS
a:hover {
background-color: yellow;
}
.sents {
display: none;
}
.active {
display: block;
position: absolute;
background-color: yellow;
width: 100%;
padding: 5px;
}
And this is the demo: 这是演示:
https://jsfiddle.net/kyubyong/umxf19vo/22/ https://jsfiddle.net/kyubyong/umxf19vo/22/
I'm not so much comfortable with javascript/jquery. 我对javascript / jquery不太满意。 Thanks for your help in advance.
感谢您的帮助。
The problem is that you remove the .active
class from all the div
s (including the one you want to toggle) and then the toggleClass
function just adds it back, so the div
you want to toggle will always be visible. 问题是您从所有
div
删除了.active
类(包括要切换的类),然后toggleClass
函数将其重新添加回去,因此要切换的div
将始终可见。
Use the siblings()
selector function to avoid this: 使用
siblings()
选择器函数可以避免这种情况:
$(document).ready(function () {
$('a').click(function () {
$(this).next('div').siblings().removeClass('active');
$(this).next('div').toggleClass('active');
});
});
Working fiddle: https://jsfiddle.net/umxf19vo/24/ 工作提琴: https : //jsfiddle.net/umxf19vo/24/
Your code almost works, except for hiding the examples when the same word is clicked. 您的代码几乎可用,除了单击相同单词时隐藏示例。 To do that, you must first get the current state of the word clicked.
为此,您必须首先获取被单击单词的当前状态。 Only make it active if it wasn't already active.
仅在尚未激活时将其激活。
To get the current state, you can use hasClass('active')
. 要获取当前状态,可以使用
hasClass('active')
。 Since you are adding the class (conditionally), you can just use addClass('active')
inside an if
statement. 由于您是有条件地添加类,因此可以在
if
语句中使用addClass('active')
。
Alternatively, you could use toggleClass('active', !isActive)
, but then, when deactivating a word by clicking it again, you would attempt to remove a class of which you know it already was removed before. 另外,您可以使用
toggleClass('active', !isActive)
,但是,当再次单击以停用某个单词时,您将尝试删除一个您之前知道已经删除过的类。 That would be useless interaction with the DOM, and I prefer to use the if
then to prevent that. 那将是与DOM的无用交互,我更喜欢使用
if
来防止这种情况。
$(document).ready(function () { $('a').click(function () { var isActive = $(this).next('div').hasClass('active'); $('a').next('div').removeClass('active'); if (!isActive) { $(this).next('div').addClass('active'); } }); });
a:hover { background-color: yellow; } .sents { display: none; } .active { display: block; position: absolute; background-color: yellow; width: 100%; padding: 5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a>word1</a> <div class="sents"> <li>This is a first example</li> </div> <a>word2</a> <div class="sents"> <li>This is a second example</li> <li>This is a second example</li> </div> <a>word3</a> <div class="sents"> <li>This is a third example</li> <li>This is a third example</li> <li>This is a third example</li> </div>
Try it like this 像这样尝试
$(document).ready(function () {
$('a').click(function () {
if ($(this).next('div').hasClass('active')){
$('.sents').removeClass('active');
}
else{
$('.sents').removeClass('active');
$(this).next('div').addClass('active');
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.