显示 div 中的第一个元素并隐藏其余元素答案

【问题标题】：Show first element in a div and hide the rest显示 div 中的第一个元素并隐藏其余元素
【发布时间】：2013-01-10 17:43:58
【问题描述】：

我目前的代码可以隐藏第一个“p”标签之外的所有内容，然后触发点击功能来切换其余 div 的 p 元素：

<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>

jQuery('.col').each(function() { 
    jQuery(this).find('p:not(:first)').hide();
  });

  jQuery('.sub-content-btn').click(function() {
    jQuery(this).toggleClass('active');
    if(jQuery(this).hasClass('active')){
      jQuery(this).parent('.col').find('p').show();
    } else {
      jQuery(this).parent('.col').find('p').hide();
      jQuery(this).parent('.col').find('p:first').show();
    }
  });

如何修改此代码以隐藏 p 标签和 ul 元素而不仅仅是 p 标签，然后切换所有元素？有问题的 div 将包含 ul。

【问题讨论】：

标签： jquery html

【解决方案1】：

试试这个

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'。

【解决方案2】：

试试这个：

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();
  }
});

Example fiddle

【讨论】：