更改bootstrap glyphicon onclick函數

Question

我試圖在用戶單擊鏈接時將.glyphicon-menu-down切換到glyphicon-menu-up。我究竟做錯了什麼？它不工作。我錯過了使用jquery嗎？

標記

<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> 
       Admin 
       <span class="panelarrow glyphicon glyphicon-menu-down pull-right"></span></a> 

腳本

$(document).ready(function(){ 
$('.panelarrow').click(function(){ 
    $(this).find('span').toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up'); 
}); 
    }); 

Answer 1

你的情況$(this)指.panelarrow和你想findspan元素.panelarrow內。

解決方案：

$(document).ready(function() { 
    $('.panelarrow').click(function(){ 
    $(this).toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up'); 
    }); 
}); 

或者，如果你想通過點擊a元素上使用此選項可以更改你的圖標：上跨度

$(document).ready(function() { 
    $('[data-toggle="collapse"]').click(function(){ 
    $(this).find('span').toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up'); 
    }); 
}); 

Answer 2

點擊（包括glyphicon）會讓你使用「this」表示跨度 - 那麼觸發類可以包含在一個命令中：

$(document).ready(function(){ 
    $('.panelarrow').click(function(){ 
    $(this).toggleClass('glyphicon-menu-down glyphicon-menu-up'); 
    }); 
});