jQuery手风琴HTML箭头翻转

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在单击的openCloseSelector中找到.arrow。

我还建议将$(this).find('.arrow').html("↑");放入if语句中，以便箭头的文本根据相同的条件变化。

Answer 2

我想我们会用稍微不同的方式来做，在'dt'标签的背景中使用箭头图像，并在点击时改变其位置。我做了一些工作让你明白。

点击此链接查看示例。 JS Fiddle example

还有，当你有一个箭头图像时，确保你取消注释css。

希望对你有帮助。