在单击不同的html元素时隐藏先前使用jquery显示的html元素
在单击不同的html元素时隐藏先前使用jquery显示的html元素
提问于 2018-07-14 03:41:12
我有一个求职站点，其中显示了职务列表，当单击某个职务时，使用jquery show()函数显示以前设置为display:"none"的某些元素。单击新职务时，如何再次隐藏这些元素？所以当一个新的工作被扩展时，一个工作看起来会崩溃？链接到更大的jsfiddle：https://jsfiddle.net/s5gh2rLm/6/，但我相信下面包含了最重要的代码部分
<body>
<div class="job">
<h2><a class="job_link" href="#">Accountant - ABC Bank</a></h2>
<p class="start_hidden job_p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur corporis dolor eius facere laboriosam libero minima necessitatibus nobis nulla, officiis optio quis tempore vel. Exercitationem harum ipsum perspiciatis unde voluptate!</p>
<p class="start_hidden">salary: 12</p>
</div>
<div class="job">
<h2><a class="job_link" href="#">Doctor - XYZ Hosptial</a></h2>
<p class="start_hidden job_p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur corporis dolor eius facere laboriosam libero minima necessitatibus nobis nulla, officiis optio quis tempore vel. Exercitationem harum ipsum perspiciatis unde voluptate!</p>
<p class="start_hidden">salary: 12</p>
</div>
<div class="job">
<h2><a class="job_link" href="#">Teacher - ABC School</a></h2>
<p class="start_hidden job_p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur corporis dolor eius facere laboriosam libero minima necessitatibus nobis nulla, officiis optio quis tempore vel. Exercitationem harum ipsum perspiciatis unde voluptate!</p>
<p class="start_hidden">salary: 12</p>
</div>
</html>js (到目前为止只用于显示以前隐藏的元素)：
$(document).ready(function(){
$(".job_link").click(function(){
$(this).parents('.job').find(".start_hidden").show();
});
}); css：
.start_hidden{
display: none;
}回答 1
Stack Overflow用户
发布于 2018-07-14 03:44:12
没问题!您需要做的就是在显示必要的元素之前隐藏所有内容：
$(document).ready(function(){
$(".job_link").click(function(){
$(".start_hidden").hide(); // Add this line
$(this).parents('.job').find(".start_hidden").show();
});
}); 祝好运!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51331864
复制相关文章
相似问题