隐藏活动并使用jquery显示一个
隐藏活动并使用jquery显示一个
提问于 2018-04-24 09:31:18
我正在尝试创建一个自动隐藏选项，允许用户单击链接来显示/显示项目，但当用户选择不同的主题时，我希望能够自动关闭活动显示。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myp-0", ).click(function(){
$("#loose-0").toggle(600);
});
});
$(document).ready(function(){
$("#myp-1", ).click(function(){
$("#loose-1").toggle(600);
});
});
$(document).ready(function(){
$("#myp-2", ).click(function(){
$("#loose-2").toggle(600);
});
});
</script>
</head>
<body>
<p id="myp-0">click</p>
<p id="loose-0"> I will disappear.</p>
<p id="myp-1">click</p>
<p id="loose-1"> I will disappear.</p>
<p id="myp-2">click</p>
<p id="loose-2">I will disappear.</p>
</body>
</html>
因此，该示例显示显示内容的链接。如何在单击链接之前隐藏内容，当我点击链接时，显示内容，但让jquery检查是否有其他链接处于活动状态并自动关闭它们？
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-04-24 09:44:29
使用外卡与隐藏方法和旁边的切换。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('p[id*="myp"]').click(function() {
$('p[id*="loose"]').hide();
$(this).next('p').toggle(600);
});
});
</script>
</head>
<body>
<p id="myp-0">click</p>
<p id="loose-0">If you click on me, I will disappear.</p>
<p id="myp-1">click</p>
<p id="loose-1">If you click on me, I will disappear.</p>
<p id="myp-2">click</p>
<p id="loose-2">If you click on me, I will disappear.</p>
</body>
</html>
Stack Overflow用户
发布于 2018-04-24 09:38:13
首先，请注意，每个页面只需要一个document.ready事件处理程序。
为了简化代码，您可以使用“不要重复自己(DRY)”原则。为了实现这一点，所有可点击的p元素和被切换的元素上都有公共类。然后，您可以使用DOM遍历(在本例中为next() )查找相关元素并切换它。然后，您可以选择与事件无关的所有其他元素，并隐藏它们。就像这样：
$(function() {
$('.myp').click(function() {
var $target = $(this).next('.loose').toggle(600);
$('.loose').not($target).slideUp(600);
});
});p { margin: 0; }
.loose { display: none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="myp">click</p>
<p class="loose">If you click on me, I will disappear.</p>
<p class="myp">click</p>
<p class="loose">If you click on me, I will disappear.</p>
<p class="myp">click</p>
<p class="loose">If you click on me, I will disappear.</p>
Stack Overflow用户
发布于 2018-04-24 09:44:32
它应该可以工作，但可能需要一些更改，尝试一下
.hidden{
display :none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myp-0,#myp-1,#myp-2").click(function(){
$('.newCLass').addClass('hidden')
$(this).next('p').toggleClass('hidden')
});
});
});
</script>
</head>
<body>
<p id="myp-0">click</p>
<p id="loose-0" class="newCLass">If you click on me, I will disappear.</p>
<p id="myp-1">click</p>
<p id="loose-1" class="newCLass">If you click on me, I will disappear.</p>
<p id="myp-2">click</p>
<p id="loose-2" class="newCLass">If you click on me, I will disappear.</p>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49998114
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号