Как изменить цвет фона родительского элемента

Question

Как изменить цвет фона родительского элемента

-3

Бад-бутстрап, мне нужно изменить фон (.panel), когда его дочерний.collapse имеет.in

демонстрация

Ниже приводится результат:

Appy 27 сен. 2017, в 13:44

Источник

0

Будьте конкретны: .panel-body , .panel-heading ....?
zer00ne 27 сен. 2017, в 11:12
0

проверьте мой обновленный ответ, который может помочь!
RaJesh RiJo 27 сен. 2017, в 11:54
0

как насчет нового ответа
Deepu Reghunath 27 сен. 2017, в 12:17

Показать ещё 1 комментарий

Теги:

javascript

jquery

twitter-bootstrap

5 ответов

Ещё вопросы

Будьте конкретны: .panel-body , .panel-heading ....?
проверьте мой обновленный ответ, который может помочь!

RaJesh RiJo · Answer 1 · 2017-09-27T13-06-00.000Z

Попробуйте что-то простое, как показано ниже.

$('.panel-title a').click(function() {
  $('.panel').removeClass('bg');
  $('.panel-heading').removeClass('bg');
  $(this).closest('.panel').addClass('bg');
  $(this).closest('.panel-heading').addClass('bg');
});

body {
  padding: 50px;
}

.panel-default>.panel-heading {
  background: none;
}

.bg {
  background-color: cyan !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel-group" id="accordion">
  <div class="panel panel-default bg">
    <div class="panel-heading bg">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
  </div>
</div>

это не сработает, если вы снова нажмете на тот же элемент. цвет останется там

Shiladitya · Answer 2 · 2017-09-27T14-59-00.000Z

Здесь вы найдете решение https://fiddle.jshell.net/qjfsnpyc/8/

$('.panel').click(function(){
  if($(this).hasClass('active')){
    $(this).removeClass('active');
  } else {
    $(this)
      .addClass('active')
      .siblings('div.panel')
      .removeClass('active');
  }
});

$('#collapse1').closest('div.panel').addClass('active');

body {padding: 50px;}
.panel-default>.panel-heading {background: none !important;}

.active {
  background: #eee !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
</div>

Надеюсь, что это поможет вам.

Mayank Pandeyz · Answer 3 · 2017-09-27T13-04-00.000Z

Попробуйте что-то вроде этого:

$(function(){
    $('.panel-title').click(function(){
    $(this).css('color', 'red');  // Here you can change color of its any parent element by using DOM traversing functions
  });
});

Обновленный скрипт

Amit Kumar · Answer 4 · 2017-09-27T12-56-00.000Z

Вы можете использовать Accordion Events для обнаружения, когда аккордеон открыт. затем соответствующим образом измените цвет фона.

$('#accordion').on('shown.bs.collapse', function(){
    $('.panel').css("background-color", "#f5f5f5");
});

скрипка

Deepu Reghunath · Answer 5 · 2017-09-27T12-16-00.000Z

Как насчет этого.

https://fiddle.jshell.net/rtzz25ta/

внесли некоторые изменения в событие click

$(function(){
	$('.panel-title').click(function(){
  	$(".panel-heading").css('background','white');    
  	$(this).parent().css('background', 'gray'); 
 
    		if ( !$(this).find("a").hasClass( "collapsed" ) ) 
   			{ 
   					$(this).parent().css('background', 'white');   
  			 }
  
   
  });
});

body {padding: 50px;}

.panel-body
{
  background-color:gray;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading" style="background-color:gray">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in" >
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
</div>