本文介绍了加载并单击隐藏/显示div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想做的是在加载时隐藏除#p0以外的所有段落.另外，如果用户单击同级跨度，我想显示一个段落，并隐藏所有其他段落
What I want to do is to have all paragraphs but #p0 hidden on load.Additionally I want to show a paragraph if user clicks on it's sibling span, and hide all other paragraphs
<ul>
<li>
<h1>
<span id="span0">Lorem</span>
<p id="p0">Lorem ipsum dolor sit amet,</p>
</h1>
</li>
<li>
<h1>
<span id="span1">Lorem2</span>
<p id="p1">Lorem ipsum dolor sit amet,</p>
</h1>
</li>
<li>
<h1>
<span id="span2">Lorem3</span>
<p id="p2">Lorem ipsum dolor sit amet,</p>
</h1>
</li>
...
推荐答案
$('p:not("#p0")').hide();
$('span').on('click',function() {
$('p').hide();
$(this).next('p').show();
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<h1>
<span id="span0">Lorem</span>
<p id="p0">Lorem ipsum dolor sit amet,</p>
</h1>
</li>
<li>
<h1>
<span id="span1">Lorem2</span>
<p id="p1">Lorem ipsum dolor sit amet,</p>
</h1>
</li>
<li>
<h1>
<span id="span2">Lorem3</span>
<p id="p2">Lorem ipsum dolor sit amet,</p>
</h1>
</li>
</ul>如果您希望将其与页面上其他p/span隔离开来，则可以使用前缀为"属性选择器(^=) ...
If you wish to isolate this from other p's / span's on the page you could use the 'prefixed-by' attribute selector (^=) ...
$('p[id^="p"]:not("#p0")').hide();
$('span[id^="span"]').on('click',function() {
$('p[id^="p"]').hide();
$(this).next('p[id^="p"]').show();
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<h1>
<span id="span0">Lorem</span>
<p id="p0">Lorem ipsum dolor sit amet,</p>
</h1>
</li>
<li>
<h1>
<span id="span1">Lorem2</span>
<p id="p1">Lorem ipsum dolor sit amet,</p>
</h1>
</li>
<li>
<h1>
<span id="span2">Lorem3</span>
<p id="p2">Lorem ipsum dolor sit amet,</p>
</h1>
</li>
</ul>这篇关于加载并单击隐藏/显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！