jQuery 手风琴 header 箭头

Question

我有一个手风琴，它的表现与我想要的不一样。我想要一个部分列表，其中有一个漂亮的红色箭头指向右侧。然后当我打开它时，我希望箭头指向下方。问题是向下箭头没有出现。这里是fiddle：fiddle。想法？

<div class="accordion">   
    <h3 class="arrow-right">First Step<hr/></h3>
    <div class="accordion-body">Content 1</div>

    <h3 class="arrow-right">Second Step<hr/></h3>
    <div class="accordion-body">Content 2</div>

    <h3 class="arrow-right">Third Step<hr/></h3>
    <div class="accordion-body">Content 3</div>
</div>

    jQuery(function ($) {

        $(".accordion").accordion({
            clearstyle: true,
            collapsible: true,
            active: 0
        }); 
        $(".accordion h3").click(function () {  
           //here want all non selected section to have a right arrow
    $(this).siblings("h3").removeClass("arrow-down");
    $(this).siblings("h3").addClass("arrow-right");   

    //here I want the selected section to have a down arrow
    $(this).children("h3").removeClass("arrow-right");
    $(this).children("h3").addClass("arrow-down");             });
    });

Answer 1

你的最后两行试图找到被点击的 'h3' 的子项，但它没有子项。 'h3' 已经被选中，所以这两行应该只使用 "$(this)":

//here I want the selected section to have a down arrow
$(this).removeClass("arrow-right");
$(this).addClass("arrow-down");

遗憾的是，修复此问题仍然无法达到您想要的效果。这是我在不更改 HTML 结构的情况下想到的最快解决方案。请注意，它缓存了对 $(this) 的引用以提高性能（通过删除冗余选择器）。如果您有任何问题，请告诉我。

jQuery(function ($) {

    $(".accordion").accordion({
        clearstyle: true,
        collapsible: true,
        active: 0
    }); 

    $("h3").click(function() {  
        var selected = $(this);
        $(".accordion").find("h3").not(selected).removeClass("arrow-down").addClass("arrow-right");
        selected.toggleClass("arrow-right");
        selected.toggleClass("arrow-down");

    });    
});

jQuery 手风琴 header 箭头

jQuery accordion header arrows

jquery

jquery-ui-accordion