Question

我目前有一个我正在使用的定制手风琴的标记;

<dl class="acc">
    <dd>
        <a href="#panel1">Panel1 Title</a>
        <div id="panel1" class="content">CONTENT</div>
    </dd>

    <dd>
        <a href="#panel2">Panel2 Title</a>
        <div id="panel2" class="content">CONTENT</div>
    </dd>
</dl>

我正在使用这个小jQuery片段在单击前面的链接时向div添加一个“active”类;

$('.acc dd').click(function(){
    $(this).find('a').removeAttr("href");
    $(this).find('div.content').toggleClass('active');
});

工作正常，因为div的内容只是一个图像，但现在有文本，当用户点击它时，手风琴窗格关闭，因为我使用dd作为选择器。

有没有办法可以定位链接，然后只将active类应用到紧随其后的div？

如果有帮助，上面的标记也适用于每个手风琴窗格。

Answer 1

你可以试试这个：

$('.acc a').click(function(){
   $('.active').removeClass('active');
   $(this).removeAttr("href");
   $(this).next('div.content').toggleClass('active');
});

Answer 2

以下是如何定位所点击的链接，并使用active类从任何其他div中删除该类：

$('.acc dd').click(function(){
    $(this).removeAttr("href"); //not sure why you're doing this
    $(this).closest( 'dl' ).find('div.content').not( $(this).next() ).removeClass( 'active' );
    $(this).next().addClass( 'active' );
});

为什么要删除href？你不会再点击这个链接吗？

在点击时将最接近的元素定位到链接

2 个答案: