在slideToggle中更改跨度onClick內的html

Question

我希望在單擊標題時顯示ul的內容，而且還要更改該標題旁邊的圖標。 默認情況下，圖標為向下箭頭，單擊ul時應滑動打開，圖標應更改為向上箭頭，再次單擊則應更改為向下箭頭等。

我可以使這種情況發生一次，但是一旦單擊標題兩次便停留為向上箭頭，我想再次將其更改為向下箭頭等。有人可以向我指出正確的方向嗎？

謝謝。

我的HTML代碼：

<h4 class="mobileDrop">Find Your Way Around <span><i class="fa fa-caret-down linkIcon"></i></span></h4>

<ul class="footerNav">
     <li><a href="#">1st List Item</a></li>
     <li><a href="#">2nd List Item</a></li>
     <li><a href="#">3rd List Item</a></li>
</ul>

我的代碼JS：

// footer specifics
$( ".footerNav" ).hide();
// toggle on click
$( ".mobileDrop" ).click(function() {
    $( ".footerNav" ).slideToggle( 400, function()  {
        $( ".mobileDrop span" ).html( '<i class="fa fa-caret-up linkIcon"></i>' );  
    });
});

Answer 1

工作小提琴

http://jsfiddle.net/qY7as/3/

 $( ".footerNav" ).hide();
// toggle on click
$( ".mobileDrop" ).click(function() {
    $( ".footerNav" ).slideToggle( 400, function()  {

        $( ".mobileDrop span" ).html( '<i class="fa fa-caret-up linkIcon"></i>' );  

         var yourElement = $( ".mobileDrop span i").attr('class');
        //check class and give it what you want
        $( ".mobileDrop span i").attr('class','new value with class and new background icon');
    });
});

<h4 class="mobileDrop">Find Your Way Around 
    <span></span>
</h4>

<ul class="footerNav">
     <li><a href="#">1st List Item</a></li>
     <li><a href="#">2nd List Item</a></li>
     <li><a href="#">3rd List Item</a></li>
</ul>

Answer 2

假設默認情況下您有一個caret-類：

// footer specifics
$( ".footerNav" ).hide();
// toggle on click
$( ".mobileDrop" ).click(function() {
$( ".footerNav" ).slideToggle( 400, function()  {
    $( ".mobileDrop span i" ).toggleClass('fa-caret-up').toggleClass('fa-caret-down');  
});
});

Answer 3

您無需更改html。 只需切換課程。

$( ".mobileDrop" ).click(function() {
    var drop = $(this);
    $( ".footerNav" ).slideToggle( 400, function()  {
        drop.find('.fa.linkIcon').toggleClass('fa-caret-up fa-caret-down');
    });
});

Answer 4

嘗試這個：

$( ".footerNav" ).slideToggle( 400, function()  {
    var linkIcon = $(".linkIcon");
    if (linkIcon.hasClass('fa-caret-down')) {
        linkIcon.removeClass('fa-caret-down').addClass('fa-caret-up');
    } else {
        linkIcon.removeClass('fa-caret-up').addClass('fa-caret-down');
    }
});

Answer 5

您需要做的就是在各類之間切換：

$( ".mobileDrop span i" ).toggleClass('fa-caret-up ','fa-caret-down');

他們將根據單擊的間隔自動切換類。

演示版

參考：

.toggleClass（）

Answer 6

至於顯示/不顯示，您可以使用菜單：

$( ".mobileDrop" ).click(function() {
    $(".footerNav").toggle();
});

至於箭頭，您可以為不同的箭頭分別使用兩個類，或者每次使用toggleClass每次更改背景圖像css