Bootstrap: изменение цвета заголовка панели при нажатии

html css twitter-bootstrap nav collapsable

14283 просмотра

3 ответа

8 Репутация автора

Привет, вчера вечером я дал себе ускоренный курс по начальной загрузке, и мне было очень весело с ним. Я нашел в Интернете складную панель, которая действительно хорошо работает для того, чего я надеюсь достичь в моей панели навигации. Однако я хочу, чтобы при расширении цвет фона заголовка панели изменялся. Я не достаточно знаком с внутренним механизмом начальной загрузки, но пока не могу разобраться с ним самостоятельно (скоро! Надеюсь). Код в вопросе ниже:

            <div class="panel-group minmarg" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        OPI<b class="caret"></b>
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body minmarg">
                    <ul class="nav nav-pills nav-stacked pill-trngtheme minmarg">
                        <li role="presentation"><a href="#">OPI Main Site</a>
                        </li>
                        <li role="presentation" class="active"><a href="#">Training</a>
                        </li>
                        <li role="presentation"><a href="#">Procedures</a>
                        </li>
                        <li role="presentation"><a href="#">Corrective Action</a>
                        </li>
                        <li role="presentation"><a href="#">Human Performance Improvement</a>
                        </li>
                        <li role="presentation"><a href="#">LEAN Management</a>
                        </li>
                        <li role="presentation"><a href="#">Coduct of Operations</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
Автор: webforwork Источник Размещён: 10.07.2015 02:37

Ответы (3)

4 плюса

2993 Репутация автора

Вы можете ссылаться на документ

Вот код для вас:

$(".collapse").on('shown.bs.collapse',function(){
     // change background when expanded

});
$(".collapse").on('hidden.bs.collapse',function(){
     // change background when hide
});
Автор: dieuvn3b Размещён: 10.07.2015 02:51

2 плюса

2539 Репутация автора

Решение

Webforwork , Привет.
Как насчет примерно такого и поменять класс, используя toggleclass.

CSS 

 .panel-clr {
        background-color:greenyellow;
    }     
 .panel-clr.on {
        background-color:dodgerblue;
    }

JS 

$( function() {
  $('.panel-clr').click( function() {
      $(this).toggleClass('on');
} )
});

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<style>
body {
  padding-top: 50px;
}
.spacer {
  margin-top: 2%;
  margin-bottom: 2%;
}    
.block {
  height: 440px;
}  

.panel-clr {
    background-color:greenyellow;
} 
    
.panel-clr.on {
    background-color:dodgerblue;
}
  
</style>

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

<div class="container col-lg-12 spacer"></div>
<div class="container col-lg-12">

<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 bg-info block">
         <div class="panel-group minmarg" id="accordion">
        <div class="panel ">
            <div class="panel-heading panel-clr">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        OPI<b class="caret"></b>
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body minmarg">
                    <ul class="nav nav-pills nav-stacked pill-trngtheme minmarg">
                        <li role="presentation"><a href="#">OPI Main Site</a>
                        </li>
                        <li role="presentation" class="active"><a href="#">Training</a>
                        </li>
                        <li role="presentation"><a href="#">Procedures</a>
                        </li>
                        <li role="presentation"><a href="#">Corrective Action</a>
                        </li>
                        <li role="presentation"><a href="#">Human Performance Improvement</a>
                        </li>
                        <li role="presentation"><a href="#">LEAN Management</a>
                        </li>
                        <li role="presentation"><a href="#">Coduct of Operations</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div> 
      
</div>
        
    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
<script> 
    
$( function() {
  $('.panel-clr').click( function() {
      $(this).toggleClass('on');
} )
});    
</script> 
    
</body>
</html>

Автор: AngularJR Размещён: 10.07.2015 03:47

1 плюс

840 Репутация автора

AngularJR ответ правильный, но мне было немного трудно понять с моими ограниченными знаниями css и несуществующими знаниями jQuery. Кроме того, я использую реагирование, и поэтому настройка элементов DOM после их рендеринга не была для меня подходом.

Основной принцип

Основной принцип происходящего заключается в том, что в элемент html добавляется дополнительный тег класса:

Так

<div class="panel-heading">...</div>

становится

<div class="panel-heading on">...</div>

Неважно, как вы добавляете эти дополнительные классы, jQuery ( $) - это всего лишь один из вариантов.

Различные правила CSS теперь могут быть применены к этим двум элементам div с помощью селекторов CSS:

.panel-heading {
    background-color:greenyellow;
}

а также

.panel-heading.on {
    background-color:dodgerblue;
}

соответственно.

Обратите внимание, что между .panel-headingи .on. См. Следующий вопрос переполнения стека для получения дополнительной информации: В чем разница между классами CSS .foo.bar (без пробела) и .foo .bar (с пробелом) .

Мой в стороне о решении проблемы при использовании реагировать

Однако в случае использования response-bootstrap "panel-heading"тег создается автоматически, <Panel>и <div class="panel-heading">элемент не может быть найден и доступен после его рендеринга (жизненный цикл реакции является странным). Поэтому никакие дополнительные классы не могут быть добавлены к нему.

Таким образом, дополнительный класс, "on"должен быть добавлен к родительскому элементу panel-headingdiv:

HTML (или .jsx):

<div class="on">
    <Panel header="My Title">...STUFF...</Panel>
</div>

в результате получается DOM, который выглядит следующим образом (немного упрощенно):

<div class="on">
   <div class="panel">
       <div class="panel-heading">
           My Title
       </div>
       <div class="panel-body">
           .....STUFF.....
       </div>
   </div>
</div>

Теперь есть внешний div с "on"классом, и "panel-heading"div содержится внутри него.

Div заголовка панели теперь можно стилизовать в css с помощью следующих селекторов:

.panel-heading {
    background-color:greenyellow;
}

а также

.on .panel-heading {
    background-color:dodgerblue;
}

Обратите внимание, как .onтеперь селектор находится перед .panel-headingселектором, и между двумя селекторами также есть пробел; это потому, что элемент с .onклассом теперь является предком элемента с .panel-headingклассом.

Примечание. Добавление дополнительного "on"класса непосредственно <Panel>в панель и ее отсутствие в дополнительном элементе будет работать аналогично.

Теперь обработчик «onClick» может изменить класс родительского элемента, чтобы повлиять на стилизацию заголовка панели, что намного проще, чем поиск в DOM правильного "panel-heading div"(IMHO). И что очень важно, в моем случае использования реакции, этот "on"класс может быть указан непосредственно для элемента при вызове процедуры рендеринга.

Автор: Resonance Размещён: 15.09.2015 12:43
Вопросы из категории :
32x32