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("&darr;");
$(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("&uarr;");
    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。

希望有所帮助。

jQuery Accordion HTML Arrow翻转

2 个答案: