Question

我正在使用jQuery并设法将一个简单的手风琴粘贴在一起，只能同时打开一部分手风琴。手风琴的每个部分都有一个“+”符号来表示这一点。单击该部分并展开内容后，“+” - 图标将切换为“ - ”。 这一切都很好用，直到我需要在同一页上有2个（或更多）手风琴。它现在的工作方式，脚本将所有扩展的div“ - ” - 图标从“ - ”切换为“+”。我只希望与最新点击的链接在同一div中的+/-图标切换，现在的方式，点击链接时所有扩展部分的图标都会被更改。

以下是使用的脚本：

$(document).ready(function() {

    $(".accordion dd").hide();

    $(".accordion dt a").click(function(){
        $(this).parent().next().siblings("dd:visible").slideUp("slow");
        $(this).parent().next().slideToggle("slow");
        if ($(this).is("expanded")) {
            $(this).toggleClass("expanded");
            } else {
            $(".accordion dt a").removeClass("expanded");
            $(this).addClass("expanded");
        }
        return false;
    });
});

这是一些HTML。下面的html是一个实例。如果页面上有多个列表，则下面的html结构将重复。

<div style="position:relative;" class="regularBorder roundedCorner">
<h2>header</h2>
<dl class="accordion">
    <dt class="roundedCorner navbarBG first noSideBorder">
        <a href="/">Lorem Ipsum 1</a></dt>
    <dd>
        <ul class="accordion noSideBorder">
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">Lorem ipsum dolor</a></li>
        </ul>
    </dd>
    <dt class="roundedCorner navbarBG noSideBorder">
        <a href="/">Lorem Ipsum 2</a></dt>
    <dd>
        <ul class="accordion noSideBorder">
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">Lorem ipsum dolor</a></li>
        </ul>
    </dd>
    <dt class="roundedCorner navbarBG noSideBorder">
        <a href="/">Lorem Ipsum 3</a></dt>
    <dd>
        <ul class="accordion noSideBorder">
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">Lorem ipsum dolor</a></li>
        </ul>
    </dd>
</dl>
</div>

因此，我们将非常感谢能够完成这项工作的简单解决方案！

Answer 1

不应该这样：

$(".accordion dt a").removeClass("expanded");

是这样的：

$(this).parents('.accordion').find('dt a').removeClass("expanded");

Answer 2

var selector = '.accordion dt a';
$(selector ).each(function()
{
        $(this).removeClass("expanded");
});

从所有<a>-tags within a certain div using jQuery</a>中删除课程

2 个答案: