Блог

Главная - Вопросы по программированию - Показывает другой цвет при нажатии на аккордеон начальной загрузки

Показывает другой цвет при нажатии на аккордеон начальной загрузки

#jquery #html #css #twitter-bootstrap #accordion

#jquery #HTML #css #twitter-bootstrap #аккордеон

Вопрос:

Я считаю, что это очень простая вещь, но все еще страдает…

Мне просто нужно изменить цвет в части заголовка boostrap accordion, когда пользователь сворачивает его. Итак, когда часть accordtion сворачивается, я хочу, чтобы цвет заголовка отличался от остальных заголовков accordions, и когда пользователь нажимает на другой заголовок, этот заголовок возвращается к «нормальному цвету», а другой сворачивается и меняет цвет.

Теперь, что он делает, когда я нажимаю на него, он сворачивается и красиво меняет цвет, однако, когда я нажимаю снова, у него тот же цвет, поэтому я должен щелкнуть еще раз, снова сворачивается, но возвращается к цвету по умолчанию, даже когда он свернут.

Я пытался протестировать многие вещи, но все еще не получил надлежащего результата.

Спасибо 🙂

HTML:

 <div class="panel panel-default">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
              <div class="panel-header">
                321
              </div>
            </a>
   <div id="collapseOne" class="panel-collapse collapse in">
     <div class="panel-opened-area">
          123
     </div>
   </div>
</div>

CSS:

  .panel-header {
        background: #fff;
        color: $dark;

 .active-time {
        background: #707070;
        color: #fff;
      }

jQuery:

 $('#accordion > .panel').on('show.bs.collapse', function (e) {
    $(this).find('.panel-header').toggleClass("active-time");
});

Ответ №1:

Если я понял вашу проблему, я думаю, что нашел решение. Посмотрите здесь.

Я каким-то образом помог

 $('#accordion .panel').on("click", function() {
  $(this).siblings().find(".panel-heading").removeClass("panel-heading-active");
  $(this).find(".panel-heading").toggleClass("panel-heading-active");
});  
 .panel-heading-active {
  transition: all .5s;
  background-color: green !important;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
          <div class="panel-heading panel-heading-active" role="tab" id="headingOne">
            <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
              raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
              raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
							<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
								Collapsible Group Item #3
							</a>
						</h4>
          </div>
          <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
              on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
              raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Комментарии:

1. Спасибо, я протестировал ваш код, и он работает намного лучше, чем любой из моих результатов. Однако, поскольку мои панели — после загрузки страницы — свернуты, эффект работает некорректно. Итак, когда я загружаю страницу, несмотря на то, что эта панель слегка свернута, она не изменила цвет. Я должен сначала щелкнуть по нему, и тогда он изменится. Дело в том, что когда я нажимаю на него, это работает НАОБОРОТ. Я имею в виду, что я нажимаю на панель, она сворачивается, и у нее нормальный цвет, затем я нажимаю назад, панель закрывается, и она изменила цвет. Можете ли вы также помочь мне с этим? Многое оценено 🙂

2. Мне, вероятно, нужно что-то, что будет больше реагировать на фактическое состояние панелей, а не на метод щелчка

3. @JZK Я думаю, что понимаю вашу проблему. Я внес некоторые небольшие изменения в случае HTML, которые я оставил по ссылке в начале поста. (Представленный здесь код точно не сталкивается с проблемами с jQuery. Пожалуйста, проверьте ссылку в начале ответа).

4. Прошу прощения за более поздний ответ. Да, теперь ваш код работает именно так, как мне нужно. Я обновил свой код, так что теперь он работает лучше, но не так, как мне нужно. Теперь, когда я загружаю страницу, первая панель свернута, но заголовок имеет обычный цвет. Когда я нажимаю на любую другую панель, она сворачивается и меняет цвет, как мне нужно… итак, проблема сейчас в том, что при загрузке страницы первая свернутая панель по-прежнему имеет обычный цвет. Не могли бы вы, пожалуйста, объяснить мне, какие изменения вы внесли в HTML? Действительно, не могу увидеть важные части там, так как я использую другой код на своей странице. Я хочу реализовать только важную часть. Спасибо)

5. Оки, это работает 🙂 Три минуты спустя… привет… Еще раз спасибо!!!