0

我有一个简单的 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>
4

2 回答 2

0

而不是$('.arrow').html("&uarr;");尝试$(this).find('.arrow').html("&uarr;");。这样，您就可以让 jQuery.arrow在openCloseSelector您点击的内容中找到。

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

于 2013-05-01T14:23:48.600 回答
0

我认为我们将通过在“dt”标签的背景中使用箭头图像并在单击时更改其位置来以稍微不同的方式进行操作。我做了一些工作让你理解。

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

还要确保在有箭头图像时取消注释 css。

希望有帮助。

于 2013-05-01T14:31:07.337 回答