Question

Bootstrap手风琴，当它的孩子.collapse有.in

时我需要更改（.panel）背景

寻求以下结果：

Answer 1

尝试以下简单的事情。

＆＃13;

SELECT
    EMPNO,
    ENAME,
    CASE WHEN COUNT(DISTINCT JOB) > 1
         THEN 'yes' ELSE 'no' END AS job_changed,
    CASE WHEN COUNT(DISTINCT MGR) > 1
         THEN 'yes' ELSE 'no' END AS mgr_changed,
    CASE WHEN COUNT(DISTINCT HIREDATE) > 1
         THEN 'yes' ELSE 'no' END AS hire_date_changed,
    CASE WHEN COUNT(DISTINCT DEPTNO) > 1
         THEN 'yes' ELSE 'no' END AS dept_changed
FROM yourTable
GROUP BY
    EMPNO,
    ENAME

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试这样的事情：

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

Updated Fiddle

Answer 3

当手风琴打开时，您可以使用Accordion Events来检测。然后相应地更改它的背景颜色。

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

<强> Fiddle

Answer 4

这个怎么样？

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

在点击事件中做了一些更改

＆＃13;

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

＆＃13;

body {padding: 50px;}

.panel-body
{
  background-color:gray;
  
}

＆＃13;

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

＆＃13;

Answer 5

您可以使用解决方案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>

希望这会对你有所帮助。

如何更改父元素背景颜色

5 个答案: