Jquery 显示div中的第一个元素并隐藏其余元素
我现在已经有了这段代码,它隐藏了第一个'p'标记之外的所有内容,然后启动一个单击函数来切换divs'p元素的其余部分:Jquery 显示div中的第一个元素并隐藏其余元素,jquery,html,Jquery,Html,我现在已经有了这段代码,它隐藏了第一个'p'标记之外的所有内容,然后启动一个单击函数来切换divs'p元素的其余部分: <div class="col"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <p>Pellentesque habitant morbi tristique senect
<div class="col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<div class="sub-content-btn">Find out more</div>
</div>
如何修改此代码以隐藏p标记和ul元素而不仅仅是p标记,然后切换所有元素?有问题的div将包含ul。尝试以下方法:
jQuery('.col').each(function () {
jQuery(this).find(':not(p:first, .sub-content-btn)').hide();
});
jQuery('.sub-content-btn').click(function () {
var $btn = jQuery(this);
$btn.toggleClass('active');
if ($btn.hasClass('active')) {
$btn.siblings().show();
} else {
$btn.siblings().not('p:first').hide();
}
});
试试这个
jQuery('.col').each(function() {
var $this= jQuery(this);
$this.find(':not(p:first, .sub-content-btn)').hide();
});
jQuery('.sub-content-btn').click(function() {
var $this= jQuery(this);
var $parent= $this.parent('.col');
$this.toggleClass('active');
if($this.hasClass('active')){
$parent.find('p').show();
} else {
$parent.find('p').hide();
$parent.find('ul').hide();
$parent.find('p:first').show();
}
});
谢谢,这很有效。我所需要做的就是添加$this.parent('.col').find('p').show();到if语句hasClass“active”。