Twitter bootstrap 3.0 смена значка при смене

Question

Речь идет о Bootstrap 3.0. Я бы хотел, чтобы значок/глификон изменился при крахе. I.e, из закрытой папки в открытую.

Я искал по всему миру и читал темы здесь, на SO, но безрезультатно. This thread was close, и в основном я хочу. Как я могу заставить его работать в Bootstrap 3?

Answer 1

Этот код находит свой аккордеон с идентификатором 'Аккордеон'. Когда показаны пожары событий на свернутой панели, значок находятся в панели заголовка (предыдущий элемент), и он находит и изменяет свои глифы элемента в этом HTML код блока:

$('#accordion .panel-collapse').on('shown.bs.collapse', function() { 
    $(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down"); 
}); 

//The reverse of the above on hidden event: 

$('#accordion .panel-collapse').on('hidden.bs.collapse', function() { 
    $(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right"); 
}); 

Answer 2

В collapse события обрабатываются по-разному в Bootstrap 3. Теперь это было бы что-то вроде:

$('#collapseDiv').on('shown.bs.collapse', function() { 
    $(".glyphicon").removeClass("glyphicon-folder-close").addClass("glyphicon-folder-open"); 
}); 

$('#collapseDiv').on('hidden.bs.collapse', function() { 
    $(".glyphicon").removeClass("glyphicon-folder-open").addClass("glyphicon-folder-close"); 
}); 

Demo: http://www.bootply.com/73101

Answer 3

Вы можете также использовать class как target вместо id.

<a data-toggle="collapse" href=".details"> 
    <div class="details collapse in">Show details</div> 
    <div class="details collapse">Hide details</div> 
</a> 
<div class="details collapse"> 
... 
</div> 

Answer 4

Для обнуления коллапса плюс и минус.

HTML

<div> 
    <a data-toggle="collapse" href="#other"> 
    <h3>Others<span class="pull-right glyphicon glyphicon-plus"></span></h3> 
    </a> 
    <div id="other" class="collapse"> 
    <h1>Others are</h1> 
    </div> 
</div> 

Javascript

$(document).ready(function() { 
    $('.collapse') 
     .on('shown.bs.collapse', function() { 
      $(this) 
       .parent() 
       .find(".glyphicon-plus") 
       .removeClass("glyphicon-plus") 
       .addClass("glyphicon-minus"); 
      }) 
     .on('hidden.bs.collapse', function() { 
      $(this) 
       .parent() 
       .find(".glyphicon-minus") 
       .removeClass("glyphicon-minus") 
       .addClass("glyphicon-plus"); 
      }); 
     }); 

Answer 5

Распад события обрабатываются как:

$('#collapse').on('shown.bs.collapse', function() { 
    $(".glyphicon") 
     .removeClass("glyphicon-folder-close") 
     .addClass("glyphicon-folder-open"); 
}); 

$('#collapse').on('hidden.bs.collapse', function() { 
    $(".glyphicon") 
     .removeClass("glyphicon-folder-open") 
     .addClass("glyphicon-folder-close"); 
}); 

Answer 6

Вот мое решение:

$('.navbar-toggle').on('click', function() { 
    $(this).toggleClass('mobile-close'); 
}) 

Скрыть значок по умолчанию бары:

.mobile-close span { 
    display: none !important; 
} 

Затем вы можете стиль мобильных близко что-то вроде:

.navbar-toggle.mobile-close {  
    cursor: pointer; 
    width: 42px; 
    height: 32px; 
    line-height: 40px; 
} 
.navbar-toggle.mobile-close:before { 
    content: "×"; 
    font-size: 40px; 
    color: #231f20; 
} 

Answer 7

это является CSS-решение, которое опирается на bootstrap.js по умолчанию свернуть реализацию. Никакой дополнительной разметки HTML не требуется (не стесняйтесь заменить шрифт-Удивительный с глификонами, конечно).

<style> 
    .panel-title > a:before { 
     font-family: FontAwesome; 
     content: "\f07c"; 
     padding-right: 5px; 
    } 
    .panel-title > a.collapsed:before { 
     content: "\f07b"; 
    } 
</style> 

DEMO (Bootstrap 3.3.7):

DEMO (Bootstrap 4.0/Font Awesome 5 CSS):

Answer 8

Это один работает просто отлично для самозагрузки коллапса:

<script> 
    $(document).ready(function() { 
     $('#collapseExample').on('hidden.bs.collapse', function() { 
      $("#btnDown").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down"); 
      }) 
     $('#collapseExample').on('shown.bs.collapse', function() { 
      $("#btnDown").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up"); 
      }) 
     }); 
</script> 

Это HTML код, который я с помощью:

<div class="collapse" id="collapseExample"> 
    <div class="well"> 
    ... 
    </div> 
</div> 
<button class="btn btn-default" type="button" data-toggle="collapse" data-   target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
    <span id="btnDown" class="glyphicon glyphicon-chevron-down"></span> 
    Settings 
</button> 

Answer 9

Используя только CSS, значок самозагрузки коллапс может быть изменен с предопределенными иконки:

a[aria-expanded=true] .glyphicon-plus { 
 
    display: none; 
 
} 
 
a[aria-expanded=false] .glyphicon-minus { 
 
    display: none; 
 
} 
 
.pointer{ 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<a data-toggle="collapse" class="pointer" aria-expanded="false" data-target="#testCollpase" aria-controls="#testCollpase" > 
 
    <span class="pull-left title-sidebar">Filter By Price</span> 
 
    <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span> 
 
    <span class="pull-right"><i class="glyphicon glyphicon-minus"></i></span> 
 
    <div class="clearfix"></div> 
 
</a> 
 
<div id="testCollpase" class="collapse"> 
 
    <ul> 
 
    <li><a href="#">500$</a></li> 
 
    <li><a href="#">1000$</a></li> 
 
    </ul> 
 
</div>

В вашем HTML добавить aria-expanded="false" и добавить две иконки, что нужно установить в вашем коллапсе баре. Например,

<a data-toggle="collapse" class="pointer" aria-expanded="false" data-target="#testCollpase" aria-controls="#testCollpase" > 
    <span class="pull-left title-sidebar">Filter By Price</span> 
    <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span> 
    <span class="pull-right"><i class="glyphicon glyphicon-minus"></i></span> 
</a> 

И контролировать его из css. Когда коллапс бар расширения, то

a[aria-expanded=true] .glyphicon-plus { 
    display: none; 
} 

иначе это будет

a[aria-expanded=false] .glyphicon-minus { 
    display: none; 
} 

Выполните фрагмент кода, и я думаю, что вам просто нужно это ...

Answer 10

Полный код Сворачивание DIV с иконками в bootstrap

<!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"> 
<title>Example of Bootstrap 3 Accordion with Plus/Minus Icon</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<style type="text/css"> 
    .bs-example{ 
     margin: 20px; 
    } 
    .panel-title .glyphicon{ 
     font-size: 14px; 
    } 
</style> 
<script> 
    $(document).ready(function(){ 
     // Add minus icon for collapse element which is open by default 
     $(".collapse.in").each(function(){ 
      $(this).siblings(".panel-heading").find(".glyphicon").addClass("glyphicon-minus").removeClass("glyphicon-plus"); 
     }); 

     // Toggle plus minus icon on show hide of collapse element 
     $(".collapse").on('show.bs.collapse', function(){ 
      $(this).parent().find(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus"); 
     }).on('hide.bs.collapse', function(){ 
      $(this).parent().find(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus"); 
     }); 
    }); 
</script> 
</head> 
<body> 
<div class="bs-example"> 
    <div class="panel-group" id="accordion"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> What is HTML?</a> 
       </h4> 
      </div> 
      <div id="collapseOne" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p> 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-plus"></span> What is Bootstrap?</a> 
       </h4> 
      </div> 
      <div id="collapseTwo" class="panel-collapse collapse in"> 
       <div class="panel-body"> 
        <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p> 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-plus"></span> What is CSS?</a> 
       </h4> 
      </div> 
      <div id="collapseThree" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p> 
       </div> 
      </div> 
     </div> 
    </div> 
    <p><strong>Note:</strong> Click on the linked heading text to expand or collapse accordion panels.</p> 
</div> 
</body> 
</html>