Question

我的手风琴表现不像我想要的那样。我想要一个有一个漂亮的红色箭头指向右边的部分列表。然后，当我打开它时，我希望箭头指向下方。问题是这是向下箭头没有出现。这是小提琴：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

你的最后两行试图找到＆＃39; h3＆＃39;被点击，但它没有孩子。＆＃39; h3＆＃39;已被选中，所以这两行应该只使用＆＃34; $（this）＆＃34;：

//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手风琴标题箭头

1 个答案: