jQuery header header стрелки

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

Ваши последние две строки пытаются найти детей из «h3» быть щелкнул, но у него нет детей. «H3» уже выбран, так что эти две строки должны просто использовать «$ (это)»:

//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"); 

    });  
});