it-swarm.com.ru

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

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

Вот код 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');
  }

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

22
Dominic

Проблема в том, что ваш код jQuery не правильный.

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

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

Видите эту вторую заключительную скобку? Это закрывает функцию «вкл» рано. Попробуйте изменить ваш 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');
  });
23
royse41

Чистый 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;
}
76

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

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

Как и в ответе Бояна, я использую это решение.
Измените 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');
});
12
trante

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

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

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

2
Michael Buchok

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

Вот код 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" );
});
2
Red Web

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

По сути, это связано с этим немного 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>

Кодовый код этого кода: https://codepen.io/anon/pen/PKxzVa

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

См. Кодовую ручку из статьи, где приведены еще несколько примеров: https://codepen.io/disjfa/pen/EZdMpe

2
Inti

исправлена ​​ошибка изменения 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;
}
1
Mukesh

Для изменения значка свертывания в 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">
    
0
GKislin

если вы используете 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";
                }
0
Tower Jimmy