使用 jQuery 显示/隐藏元素答案

【问题标题】：Show/hide element using jQuery使用 jQuery 显示/隐藏元素
【发布时间】：2015-09-17 15:12:35
【问题描述】：

我正在尝试通过单击标题来添加/删除元素的类。我面临的问题是我要显示的 div 没有唯一的类，没有 ID，并且与我单击的标题处于同一级别：

<div class="panel panel-default">
    <div class="panel-heading">
       <h4 class="panel-title">
           <a data-toggle="collapse" href="#text-background" data-parent="#settings-accordeon" class="collapsed">achtergrond</a>
       </h4>
    </div>    
    <div id="text-background" class="panel-collapse collapse">
~~ Something in in it.
    </div>
</div>

我有 4 个这样的 div。

我正在尝试在 jQuery 中找到正确的选择器，以便能够执行以下操作：

点击 div 类：“panel-heading”
选择具有类的div：“panel-collapse collapse”
向该 div 添加一个名为：“in”的类

这是我目前得到的：

$('.panel-heading').click(function() {
    $('.panel-collapse').addClass('in');
});

但是因为我在这个类中有多个 div，所以它会打开它们...

【问题讨论】：

使用唯一的 id 而不是面板折叠类。
你可以使用 like -> $this.parent.child('.panel-collapse').addclass() --- 你必须稍微眨一下
提供给您的大多数答案都很好，除了使用addClass("in") 使用toggleClass("in")。
试试$(this).closest('.panel-collapse')

标签： javascript jquery html css

【解决方案1】：

现在你可以试试这个

$('.panel-heading').click(function() {
   $('.panel-collapse').removeClass('in');
    $(this).next('.panel-collapse').addClass('in');
    });

演示

$(document).ready(function(){

   $('.panel-heading').click(function() {
       $('.panel-collapse').removeClass('in');
        $(this).next('.panel-collapse').addClass('in');
        }); 
});

.in{background:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="panel panel-default">
    <div class="panel-heading">
       <h4 class="panel-title">
           <a data-toggle="collapse" href="#text-background" data-parent="#settings-accordeon" class="collapsed">achtergrond</a>
       </h4>
    </div>    
    <div id="text-background" class="panel-collapse collapse">
~~ Something in in it.
    </div>
  
  <div class="panel-heading">
       <h4 class="panel-title">
           <a data-toggle="collapse" href="#text-background" data-parent="#settings-accordeon" class="collapsed">achtergrond</a>
       </h4>
    </div>    
    <div id="text-background" class="panel-collapse collapse">
~~ Something in in it.
    </div>
  
  
  <div class="panel-heading">
       <h4 class="panel-title">
           <a data-toggle="collapse" href="#text-background" data-parent="#settings-accordeon" class="collapsed">achtergrond</a>
       </h4>
    </div>    
    <div id="text-background" class="panel-collapse collapse">
~~ Something in in it.
    </div>
  
  
  <div class="panel-heading">
       <h4 class="panel-title">
           <a data-toggle="collapse" href="#text-background" data-parent="#settings-accordeon" class="collapsed">achtergrond</a>
       </h4>
    </div>    
    <div id="text-background" class="panel-collapse collapse">
~~ Something in in it.
    </div>
</div>

【讨论】：

【解决方案2】：

这会有所帮助

$('.panel-collapse.collapse').addClass('in');

这只会选择同时具有panel-collapse 和collapse 类的元素。

【讨论】：

【解决方案3】：

你可以试试：

$('.panel-heading').click(function() {
    $(this).closest('.panel-collapse').addClass('in');
});

【讨论】：

【解决方案4】：

您可以使用this 来引用当前选择器

jQuery

$('.panel-heading').click(function() {
   $(this).siblings('.panel-collapse.collapse').addClass('in');
});

【讨论】：

【解决方案5】：

为了选择同一级别的元素，可以使用.next()函数，如下所示：

$('.panel-heading').on('click', function() {
  $(this).next('.panel-collapse.collapse').addClass('in');
});

.in {  
  padding:10px;
  border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel panel-default">
    <div class="panel-heading">
       <h4 class="panel-title">
           <a data-toggle="collapse" href="#text-background" data-parent="#settings-accordeon" class="collapsed">achtergrond</a>
       </h4>
    </div>    
    <div id="text-background" class="panel-collapse collapse">
~~ Something in in it.
    </div>
</div>

【讨论】：

【解决方案6】：

您可以使用 next，因为 panel-collapse collapse 类的 div 是 panel-heading div 的直接兄弟，也可以使用在您的情况下更好的 toggleClass：

$('.panel-heading').click(function() {
    $(this).next('div').toggleClass('in');
    });

【讨论】：

【解决方案7】：

您可以改用此选择器

$('.panel .panel-collapse:first-child').addClass('in');

或者

$('.panel-heading').next('.panel-collapse').addClass('in);

【讨论】：

【解决方案8】：

您可以将代码更改为仅适用于 .panel-heading 的直接兄弟：

$('.panel-heading').click(function() {
     $(this).siblings('.panel-collapse').addClass('in');
});

注意this 的用法是指引发事件的元素（即click 事件）。

【讨论】：

【解决方案9】：

基本上你只需要找到当前元素的下一个兄弟元素并为其添加一个类：

$('.panel-heading').click(function() {
    $(this).next().addClass('in');
});

如果面板折叠始终在您的面板标题之后，这将起作用，否则为了安全起见，您可以这样做：

$('.panel-heading').click(function() {
    $(this).next(".panel-collapse").addClass('in');
});

【讨论】：

【解决方案10】：

使用单击的 div 的引用并尝试此代码：-

 $('.panel-heading').click(function() {
  $(this).next('.panel-collapse').addClass('in');
 });

希望这适用于您的情况。

【讨论】：