如何添加「點擊後」背景變化

我基本上使用這個 - http://jsfiddle.net/navjottomer/8u57u/4/並且還使用Bootstrap的面板樣式。如何添加「點擊後」背景變化

我希望它看起來更像這雖然 - https://support.google.com/mail#topic=

我不知道在哪裏改變面板標題的顏色上打開/活動/擴展方面入手。您可以在示例中看到它以白色開始，並在展開時變爲深灰色。

任何信息都會很棒！

這是我目前的實物模型：

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="fa fa-plus text-primary"></i> Overview</a> 
      </h4> 
     </div> 
     <div id="panel1" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       content here 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="fa fa-plus text-primary"></i> Utilities</a> 
      </h4> 
     </div> 
     <div id="panel2" class="panel-collapse collapse"> 
      <div class="panel-body">Contents panel 2</div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="fa fa-plus text-primary"></i> Organization</a> 
      </h4> 
     </div> 
     <div id="panel3" class="panel-collapse collapse"> 
      <div class="panel-body">Contents panel 3</div> 
     </div> 
    </div> 
</div>

來源

2016-05-31 becca

下面是完整的代碼。

var selectIds = $('#panel1,#panel2,#panel3'); 
 
\t \t $(function($) { 
 
\t \t selectIds.on('show.bs.collapse hidden.bs.collapse', function() { 
 
\t \t $(this).prev().find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus'); 
 
\t \t }); 
 
\t \t $(".panel-heading").find("a[data-toggle=collapse]").on('click', function() { 
 
\t \t if ($(this).hasClass('collapsed')) { 
 
\t \t $(this).closest('.panel-group').find('.panel-default').removeClass('open'); 
 
\t \t $(this).closest('.panel-default').addClass('open'); 
 
\t \t } else { 
 
\t \t $(this).closest('.panel-default').removeClass('open'); 
 
\t \t } 
 
\t \t }); 
 
\t \t });

.panel-default.open { 
 
\t \t background-color: red; 
 
\t \t transition: all 1s; 
 
\t \t } 
 
\t \t .custom-panel .panel-default.open >.panel-heading { 
 
\t \t background: transparent; 
 
\t \t } 
 
     .custom-panel .panel-default>.panel-heading { 
 
     background: #fff; 
 
     }

<!DOCTYPE html> 
 
<html lang=""> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t \t <title>Title Page</title> 
 
\t \t <!-- Bootstrap CSS --> 
 
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
     \t </head> 
 
\t <body> 
 
\t \t <div class="panel-group custom-panel" id="accordion"> 
 
\t \t \t <div class="panel panel-default"> 
 
\t \t \t \t <div class="panel-heading"> 
 
\t \t \t \t \t <h4 class="panel-title"> 
 
\t \t \t \t \t <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-plus"></i>Panel 1</a> 
 
\t \t \t \t \t </h4> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="panel1" class="panel-collapse collapse"> 
 
\t \t \t \t \t <div class="panel-body">Contents panel 1</div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="panel panel-default"> 
 
\t \t \t \t <div class="panel-heading"> 
 
\t \t \t \t \t <h4 class="panel-title"> 
 
\t \t \t \t \t <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus"></i>Panel 2</a> 
 
\t \t \t \t \t </h4> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="panel2" class="panel-collapse collapse"> 
 
\t \t \t \t \t <div class="panel-body">Contents panel 2</div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="panel panel-default"> 
 
\t \t \t \t <div class="panel-heading"> 
 
\t \t \t \t \t <h4 class="panel-title"> 
 
\t \t \t \t \t <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus"></i>Panel 3</a> 
 
\t \t \t \t \t </h4> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="panel3" class="panel-collapse collapse"> 
 
\t \t \t \t \t <div class="panel-body">Contents panel 3</div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <script src="http://code.jquery.com/jquery.js"></script> 
 
\t \t <!-- Bootstrap JavaScript --> 
 
\t \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
\t </body> 
 
</html>

來源

2016-06-01 14:07:21 TOM

謝謝！現在任何想法如何爲忽略引導默認值？因此，與自舉默認值，面板標題是淺灰色的顏色，但我想的面板標題爲上關閉White。和OPEN上的RED。謝謝！ – becca

請稍候，我將爲您解決。 – TOM

請再檢查一次男人！ – TOM

添加在你的CSS或頁面標題，以力量的變化：

面板標題：

.panel-heading{ 
    background-color:red; 
    color:white; 
//more custom styles 
}

Panel主體上展開：

.panel-body{ 
    background-color:red; 
    color:white; 
    //more custom styles 
}

在加載手風琴的默認css文件後加入此css，或使用!important強制新的屬性。

*編輯顏色和背景顏色值。

來源

2016-05-31 18:09:41

是的，但是這並不能改變上活動的面板標題，改變面板的標題都在一起。我需要它在該標題處於活動狀態時進行更改。我想我需要一個JS？ – becca

您可以實現腳本之後，該腳本使用的是：

JAVASCRIPT

$('.accordion-toggle').click(function(){ 
    $('.panel-heading').removeClass('color'); 
    $(this).parents().eq(1).addClass('color'); 
});

並與背景顏色的值聲明一個CSS類，你要

CSS

.color{ 
    background-color: red !important; 
    transition: all 1s; 
}

注意：如果您在Bootstrap樣式之後聲明此類，則可能不需要！important。

來源

2016-05-31 19:54:23

不知道如果我不明白你的意思，或者如果它不工作。我添加了腳本並創建了「accordion-bk-change」的CSS類。我添加了顏色和過渡，並且它只是始終保持該顏色，而不是單擊時更改， – becca

'.accordion-bk-change {} {}}}}}}}}}}}}}}}}}}}}}}}}}} background-color：＃616161！important; transition：all 1s; }} ' – becca

@becca不知道如果我明白了，你的意思是它確實改變了第一次，但是當你點擊一個不同的面板標題不會回滾？ –

請試試我的榜樣！我定製你的代碼。

var selectIds = $('#panel1,#panel2,#panel3'); 
 
$(function($) { 
 
    selectIds.on('show.bs.collapse hidden.bs.collapse', function() { 
 
    $(this).prev().find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus'); 
 
    }); 
 
    $(".panel-heading").find("a[data-toggle=collapse]").on('click', function() { 
 
    if ($(this).hasClass('collapsed')) { 
 
     $(this).closest('.panel-group').find('.panel-default').removeClass('open'); 
 
     $(this).closest('.panel-default').addClass('open'); 
 
    } else { 
 
     $(this).closest('.panel-default').removeClass('open'); 
 
    } 
 
    }); 
 
});

.panel-default.open { 
 
    background-color: red; 
 
    transition: all 1s; 
 
} 
 
.panel-default.open .panel-heading { 
 
    background: transparent; 
 
}

<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-plus"></i>Panel 1</a> 
 
      </h4> 
 

 
    </div> 
 
    <div id="panel1" class="panel-collapse collapse"> 
 
     <div class="panel-body">Contents panel 1</div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus"></i>Panel 2</a> 
 
      </h4> 
 

 
    </div> 
 
    <div id="panel2" class="panel-collapse collapse"> 
 
     <div class="panel-body">Contents panel 2</div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus"></i>Panel 3</a> 
 
      </h4> 
 

 
    </div> 
 
    <div id="panel3" class="panel-collapse collapse"> 
 
     <div class="panel-body">Contents panel 3</div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-06-01 03:02:37 TOM

男人嗨，你需要添加類坍塌成： Panel 3 – TOM

如何添加「點擊後」背景變化

回答

相關問題