jQuery Accordion HTML Arrow Flip

Question

У меня есть простой аккордеон jQuery со стрелками в заголовках разделов, указывающих вниз, когда секция закрыта и нажимать вверх, когда секция открыта. К сожалению, когда в данный момент нажата кнопка, все стрелки переключаются вверх и остаются таким образом. Я не могу понять, как бороться с этой проблемой.

JQuery

function AccordionSelectionClickHandler(panelSelector, openCloseSelector) 
{ 
//Get a handle to the list of panels 
var allPanels = $(panelSelector); 
//Specify the click handler for elements that open or close the accordion panels 

$('.arrow').html("↓"); 
$(openCloseSelector).click(function() 
{ 
    //Close all of the panels 
    allPanels.slideUp(); 

    //Check to see if the slide is already open 
    if ($(this).parent().next().is(':hidden') == true) { 

     // if it is not, open it 
     $(this).parent().next().slideDown('normal'); 
    } 

    // fix this arrow to select a single arrow 
    $('.arrow').html("↑"); 
    return false; 
}); 
} 

(где panelSelector выбирает гармошке и openCloseSelector выбирает панель, чтобы открыть/закрыть)

HTML

<dl class="accordion"> 

<dt><a href="">Panel 1</a> 
<span class="arrow"></span></dt> 
<dd>Conttent</dd> 

<dt><a href="">Panel 2</a> 
<span class="arrow"></span></dt> 
<dd>Conntent</dd> 

<dt><a href="">Panel 3</a> 
<span class="arrow"></span></dt> 
<dd>Content</dd> 

</dl> 

Answer 1

$('.arrow').html("↑"); Вместо того, чтобы попробовать $(this).find('.arrow').html("↑");. Таким образом, вы создаете jQuery для поиска .arrow в пределах openCloseSelector, на который вы нажимаете.

Я также предложил бы поставить $(this).find('.arrow').html("↑"); внутри оператора if, поэтому текст стрелки изменяется в зависимости от того же условия.

Answer 2

Я думаю, что мы сделаем это несколько иначе, используя изображение стрелки на фоне тега 'dt' и изменив его положение при нажатии. Я проделал определенную работу, чтобы вы поняли.

нажмите на эту ссылку для просмотра примера. JS Fiddle example

Также убедитесь, что вы раскомментируете css, когда у вас есть изображение стрелки.

Надеюсь, что это поможет.