Jquery - 单击更改Glyphicon

Question

我有一个崩溃的div，似乎无法使用我现有的jquery进行图形更改。

我想将glyphicon-plus更改为glyphicon-minus，但似乎不适用于我。

$(function(){ 
 
    $('a.togglebtn').click(function(){ 
 
     if($("#toggleGlyph").length !== 0) 
 
      $(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus"); 
 
     else if ($("#toggleGlyph").length !== 0) 
 
      $(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus"); 
 
    }); 
 
}); 
 

 
$(function(){ 
 
$('a.togglebtn').click(function(){ 
 
     if($("#toggleText").text()==="Learn More"){ 
 
      $("#toggleText").html("Hide");} 
 
     else {$("#toggleText").html("Learn More");} 
 
     $('#myContent').stop().slideToggle(500); 
 
     return false; 
 
    }); 
 
    });

#mycontent { display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<a class="lead p-color learn-button togglebtn"> 
 
    <small> 
 
    <span class="glyphicon glyphicon-plus"> 
 
     </span>&nbsp;<span id="toggleText">Learn More</span> 
 
    </small> 
 
</a> 
 
</div> 
 

 
<div id="myContent" class="row row-offset" style="margin: 0 30px"> 
 
    <div class="col-xs-6 col-md-4"> 
 
    <div class="lead caption text-center"> 
 
     <h3 class="h-color">Profile</h3> 
 
    </div> 
 
    <div class="thumbnail"> 
 
     <img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Thumbnail"> 
 
    </div> 
 
    <div class="lead caption"> 
 
     <p class="p-color"><small>Some sample text. Some sample text.</small></p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

我用jQuery.toggleClass功能，并新增两个班我很之间切换。

会是这个样子......

$(function() { 
    $('a.togglebtn').click(function() { 
     $(".glyphicon").toggleClass("glyphicon-minus glyphicon-plus"); 
     $('#toggleText').text($('#toggleText').text() === "Learn More" ? "Hide" : "Learn More"); 
     $('#myContent').stop().slideToggle(500); 
     return false; 
    }); 
});