$(document).ready(function() {
('.button').click(function() {
let item = $(this).closest('item');
if (item.css.('display') === 'none') {
item.show();
item.css('display', 'block');
} else if (item.css.('display') === 'block') {
item.hide();
item.css('display', 'none');
}
});
});
.item {
display: none;
}
<div class="container">
<button class="button">Click</button>
<div class="front">front page</div>
<div class="item">
This is a paragraph with little content. This is another small paragraph.
</div>
</div>
目的是在单击按钮时隐藏和显示当前div。我有相同的容器和相同的类名。如果我使用简单的切换按钮,单击按钮时,每隔一个容器都会切换。在这种情况下,只有当前容器必须显示和隐藏。类容器的第一个div子容器最初显示,第二个div子容器隐藏/display:none。单击按钮时,第二个div子容器显示,display:none更改为display:block。此处的代码似乎不起作用。
9条答案
按热度按时间vql8enpb1#
使用.siblings()
给定一个表示一组DOM元素的jQuery对象,.siblings()方法允许我们在DOM树中搜索这些元素的兄弟元素,并从匹配的元素构造一个新的jQuery对象。
工作片段:-
cgh8pdjw2#
使用
parent()
查找当前按钮单击元素,然后在该容器中查找.item
类,只需使用fadeToggle()
* 隐藏 * 和 * 显示 * 元素,如下所示。sigwle7e3#
qq24tv8q4#
您需要使用
$(this).parent().find(":not(.button)")
,以便切换容器中除按钮以外的所有内容:yrwegjxp5#
您可以只触发
.toggle()
、.slideToggle()
或.fadeToggle()
函数,而不用检查可见性,我会使用.siblings('.item').first()
根据您的html和原始js代码查找适当的元素。zf9nrax16#
您的代码有一些错误,如
css.("display")
不是JQuery中的任何函数。你可以用这些方法中的任何一种来解决你的问题,
xoefb8l87#
使用切换
agyaoht78#
jQuery排毒,纯Javascript摇滚。
a2mppw5e9#
您可以使用jquery toggle方法切换垃圾。