Bootstrap 3 Состояние подкачки глификонов при клике

Помогите, я ищу замену изображения глификона при сворачивании в bootstrap 3. Я нашел эту тему здесь Bootstrap 3 Свернуть состояние отображения со значком Chevron Это работает в jsfiddle, но при копировании на мою собственную страницу свертывание работает, но значок не меняется сверху вниз. Есть ли что-то, что мне не хватает? Я даже поместил это в полную загружаемую версию Bootstrap 3, и значок не меняется. Вот код:

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      Collapsible Group Item #1 
    </a><i class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
  </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
  <div class="panel-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high...
  </div>
</div>
</div>
</div>
</div>

а вот js:

$('#accordion .accordion-toggle').click(function (e){
var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down       glyphicon-chevron-up');
$("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

twitter-bootstrap twitter-bootstrap-3 glyphicons
person user2752699    schedule 06.09.2013    source источник
comment
Я смог разобраться. Не надо на это реагировать. Для тех, кто заинтересован в исправлении, я переместил JS в самый низ страницы под двумя скриптами js, вызывающими файлы bootstrap.js и jquery.js.   -  person user2752699    schedule 06.09.2013
comment
Если вы заинтересованы в какой-либо похвале за указанное исправление, было бы лучше включить его в правильный ответ. Поскольку вы даже не ссылаетесь на упомянутую вами страницу, и, кроме того, никто не читает исходный код живых сайтов (tm).   -  person millimoose    schedule 07.09.2013
comment
Привет, в этом примере, как мне сделать весь заголовок гиперссылкой, а не только текст. другими словами, когда я нажимаю на панель заголовков, а не только на текст, я хочу отобразить для переключения. Как я могу это сделать?   -  person user1447718    schedule 19.09.2013
comment
Мне очень помог этот пример: bootply.com/61710   -  person Zim    schedule 16.10.2013
comment
возможный дубликат Bootstrap 3 Свернуть состояние отображения со значком Chevron   -  person zessx    schedule 29.11.2013

Ответы (1)


arrow_upward
3
arrow_downward

У моего коллеги только что была эта проблема, и он указал мне на этот вопрос. Вот решение, которое я дал ему:

HTML:

<div class="panel-group move-down" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                <h4 class="panel-title">
                    Collapsible Group Item #1
                    <i class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
                </h4>
            </a>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                ...
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    Collapsible Group Item #2
                </a><i class="indicator glyphicon glyphicon-chevron-up  pull-right"></i>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
            ...
            </div>
        </div>
    </div>
</div>

JavaScript:

$.fn.accordionChevrons = function() {
    return this.each(function(i, accordion) {
        $(".accordion-toggle", accordion).click(function(ev) {
            var link = ev.target;
            var header = $(link).closest(".panel-heading");
            var chevState = $("i.indicator", header)
                .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
            $("i.indicator", accordion)
                .not(chevState)
                .removeClass("glyphicon-chevron-down")
                .addClass("glyphicon-chevron-up");
        });
    });
};

$('#accordion').accordionChevrons();

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

person wizulus    schedule 25.04.2014