我有一个求职站点,其中显示了职务列表,当单击某个职务时,使用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;
}
发布于 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();
});
});
祝好运!
https://stackoverflow.com/questions/51331864
复制相似问题