logo标签列表

使用jQuery显示/隐藏与其他div共享类的最简单方法

jqueryhtmlcss
5

假设我的代码是这样的:

<div class="click">click</div>
<div class="something">sth</div>
<div class="container"><div class="content">content 01</div></div>
<div class="click">click</div>
<div class="something">sth</div>
<div class="container"><div class="content">content 02</div></div>

使用的CSS如下：
.content { display:none; }

当我点击其中一个 .click 时，我只想显示下面的 .content。使用jQuery，最简单和最简单的方法是什么？谢谢。

1个回答
3

只需绑定点击事件并使用任何相关的遍历方法，例如：

$('.click').on('click', function(){        
    $(this).nextAll('.container').first().children('.content').show();
});

现在最简单的方法就是将所有相关元素包裹在一个公共容器/包装器元素中，然后使用：

$(this).closest('.wrapper').find('.content').show();
我非常确定这就是我要找的答案，所以谢谢！但是，如果可以问一下，我需要在<head>中放什么文档才能使其工作？ - Ana
@Ana 如果你在头部设置了if，一旦jQuery被包含：<script>$(function($){$('.click').on('click', function(){ $(this).nextAll('.container').first().children('.content').show(); });});</script> 我在ready事件中显式地传递$，以防你使用CMS（如wordpress）在文档readyState更改时全局删除$引用。有关$(handler);文档准备快捷方式，请参见：https://api.jquery.com/ready/ 如果.click元素在DOM准备好后添加，请使用委托：https://learn.jquery.com/events/event-delegation/ - A. Wolff
我目前正在JSFiddle上测试它，但似乎不起作用。我应该选择哪个jQuery库？ - Ana
@Ana 发布你的 jsFiddle，这样我就可以检查了（当然不要忘记调试，至少在控制台中检查错误）。 - A. Wolff
@Ana 当然需要包含jQuery：http://jsfiddle.net/myL7xvp6/1/ 如果从头部包含片段，则应为：http://jsfiddle.net/myL7xvp6/2/ - A. Wolff
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接