Показать/скрыть элемент с помощью jQuery

Question

Я пытаюсь добавить/удалить класс элемента, нажав на заголовок. Проблема я столкнулся в том, что DIV я нацеливания на шоу не не имеет уникальный класс, не идентификатор и находится на том же уровне, что и заголовок я нажав на:

<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 из этих дивы ниже друг друга.

Я пытаюсь найти правильный селектор в JQuery, чтобы быть в состоянии сделать следующее:

1. Нажмите на DIV с классом: «панель-заголовок»
2. Выберите DIV с классом: " панельного коллапс коллапс»
3. Добавьте класс к этому Div называется:„в“

Это то, что я до сих пор:

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

Demo

$(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 с DIV класса panel-collapse collapse является прямым родственный к 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 с относится к элементу, который вызвал событие (т.е. 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'); 
}); 

Надеюсь, что это сработает с вашим делом.