Question

我试图通过单击标题来添加/删除元素类。我面临的问题是我要定位的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与课程：＆＃34; panel-heading＆＃34;
选择具有类的div：＆＃34; panel-collapse collapse＆＃34;
在此＆＃中添加一个名为＆＃34; in＆＃34;

这是我到目前为止所得到的：

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

但是因为我有这个类的多个div，所以它打开了所有...

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

Answer 2

这将有助于

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

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

Answer 3

你可以尝试：

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

Answer 4

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

<强>的jQuery

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

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

Answer 6

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

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

Answer 7

您可以使用此选择器

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

或

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

Answer 8

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

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

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

Answer 9

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

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

如果面板折叠总是在面板标题之后，那将会有效，否则为了安全起见，你可以这样做：

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

Answer 10

使用点击的div的引用并尝试以下代码： -

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

希望这适用于您的情况。

使用jQuery显示/隐藏元素

10 个答案: