Bootstrap 3 свернуть изменение значок chevron на клик

Я прочитал все связанные вопросы, касающиеся моего вопроса, и попробовал их все безрезультатно. Я не могу заставить мой код работать, хотя я "думаю" почти каждый код, который я написал, был тем же самым с решениями, размещенными на этом сайте.

Вот код HTML:

<div class="press-title">
  <p class="text" data-toggle="collapse" data-target="#serviceList">
    <span id="servicesButton" data-toggle="tooltip " data-original-title="Click Me!">
      <span class="servicedrop glyphicon glyphicon-chevron-down"></span> Services Offered <span class="servicedrop glyphicon glyphicon-chevron-down"></span>
    </span>
  </p>
</div>
<div id="serviceList" class="collapse">
  <div class="row featurette">
  ...

Здесь JQuery

$('#serviceList').on('shown.bs.collapse'), function() {
    $(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
  }

$('#serviceList').on('hidden.bs.collapse'), function() {
    $(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
  }

Я просто хочу изменить значок с самого начала, после свертывания элемента. Затем переключитесь назад, когда щелкнет тот же самый класс. Я действительно застрял в этом. Заранее благодарю вас!

Ответ 1

Проблема с неправильным кодом jQuery.

Вы закрываете функцию обработчика событий в начале этой строки:

$('#serviceList').on('shown.bs.collapse'), function() {

Посмотрите на эту вторую закрывающую скобку? Это закрытие функции 'on' раньше. Попробуйте изменить jQuery, чтобы выглядеть так:

$('#serviceList').on('shown.bs.collapse', function() {
    $(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
  });

$('#serviceList').on('hidden.bs.collapse', function() {
    $(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
  });

Ответ 2

Чистый CSS.

Часть HTML:

   <a data-toggle="collapse" href="#collapseExample" 
      aria-expanded="false" aria-controls="collapseExample">
        Open/Close collapse
        <i class="fa fa-chevron-right pull-right"></i>
        <i class="fa fa-chevron-down pull-right"></i>
    </a>

Ключевым элементом здесь является aria-extended = "false" или "true"

CSS

a[aria-expanded=true] .fa-chevron-right {
   display: none;
}
a[aria-expanded=false] .fa-chevron-down {
   display: none;
}

Ответ 3

Попробуйте это более элегантное решение:

$('#serviceList').click(function(){
    $(this).find('.servicedrop').toggleClass('icon-chevron-down icon-chevron-up');
});

Ответ 4

Как и в случае с Бояном, я использую это решение. Измените HTML-код следующим образом:

<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>

Лучше использовать событие .on по отношению к .click. Кроме того, используя селектор классов, он может использоваться как решение для всего сайта.

$('.chevron_toggleable').on('click', function() {
    $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

Ответ 5

Я хотел бы предложить опцию в том же ключе, что и другое решение, опубликованное здесь, но использует один div с преобразованиями. Это также поможет использовать переходы для анимации значков.

'a [aria-extended = true].fa-chevron-right {transform: rotate (0deg); } }

a [aria-extended = false].fa-chevron-right {преобразование: поворот (90 градусов); // или в любом нужном вам направлении} '

Ответ 6

вы можете попробовать это.

Вот код HTML:

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Collapsible Group Item #1<span class="glyphicon glyphicon-chevron-up"></span> </a>

Здесь JQuery

$('#accordion').on('shown.bs.collapse hidden.bs.collapse', function (e) {
         $(e.target).prev('.panel-heading').find("span.glyphicon").toggleClass('glyphicon-chevron-up glyphicon-chevron-down',200, "easeOutSine" );
});

Ответ 7

Самый простой ответ, который я мог найти, и подумал, что было бы полезно добавить сюда других.

По существу это связано с этим битом css

/* Rotating glyphicon when expanding/collapsing */
.collapse-chevron .glyphicon {
  transition: .3s transform ease-in-out;
}
.collapse-chevron .collapsed .glyphicon {
  transform: rotate(-90deg);
}

который применяется к этому биту html

<div class="collapse-chevron">
  <a data-toggle="collapse" class="collapsed" href="#collapseFilter">
     <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
     <strong>link to toggle</strong>
  </a>
  <div class="collapse" id="collapseFilter">
    <p>Some content I want collapsed or expanded</p>
  </div>
</div>

Codepen этого кода: https://codepen.io/anon/pen/PKxzVa

Источник: эта статья

Смотрите код из статьи для нескольких примеров: https://codepen.io/disjfa/pen/EZdMpe

Ответ 8

исправлена проблема с изменением HTML/CSS

HTML:

<a data-toggle="collapse" href="#doc" class="yt-toggle collapsed">View Doc 
    <i class="fa fa-caret-right fa-fw"></i> 
    <i class="fa fa-caret-down fa-fw"></i>
</a>

CSS:

.yt-toggle.collapsed .fa-caret-down {
  display: none;
}

.yt-toggle.collapsed .fa-caret-right {
  display: inline-block;
}

.yt-toggle .fa-caret-right {
  display: none;
}

Ответ 9

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-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="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-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="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-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>


<script>    

$('.card-header').click(function(){
        $cur = $(this);
        setTimeout(function(){ 
            $('.far').removeClass("fa-minus-square").addClass("fa-plus-square");
            if($cur.next().hasClass("show")) {
                //console.log('show');
                $cur.find('.far').removeClass("fa-plus-square").addClass("fa-minus-square");
            } else {
                //console.log('no show');
                $cur.find('.far').removeClass("fa-minus-square").addClass("fa-plus-square");
            }
        }, 500);


    });
    </script>

Ответ 10

если вы используете angularjs, вы можете попробовать это.

.html

<button ng-click="enlarge(x.ID)" class="{{fullglyphon[x.ID]}}" ng-init="fullglyphon[x.ID] = 'btn btn-xs btn-primary glyphicon glyphicon-resize-full'"></button>

.js

    $scope.enlarge = function(myID) { 
                $scope.fullglyphon[myID] = "btn btn-xs btn-primary glyphicon glyphicon-resize-small";
}

переключить последний или сделать, если сравнение

if ( $scope.fullglyphon[myID] == "btn btn-xs btn-primary glyphicon glyphicon-resize-small" ) {
                    $scope.fullglyphon[myID] = "btn btn-xs btn-primary glyphicon glyphicon-resize-full";
            }else{
                 $scope.fullglyphon[myID] = "btn btn-xs btn-primary glyphicon glyphicon-resize-small";
                }

Ответ 11

Для изменения значка свертывания в Bootstrap 4 с минимальным изменением HTML, я сделал

Добавить в css:

a[data-toggle="collapse"]:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: right;
    color: #4285F4;
}
a[data-toggle="collapse"].collapsed:after {
    content: "\e080";
}
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
    url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
    url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
    url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Поместите шрифты в правильное место, связанное с CSS:

\css\style.css
\fonts\glyphicons-halflings-regular.eot
\fonts\glyphicons-halflings-regular.svg
\fonts\glyphicons-halflings-regular.ttf
\fonts\glyphicons-halflings-regular.woff
\fonts\glyphicons-halflings-regular.woff2

И добавьте class="collapsed" для всех свернутых (по умолчанию) ссылок:

<a href="#info" data-toggle="collapse" class="collapsed">Collapsed link</a>
<div id="info" class="collapse">