Question

解决方案应该很简单，但由于标记，我会被抛出。现在，我在页面上有4个相同的部分，带有以下标记。问题是当点击“tag-trigger”时它们全部同时打开/关闭。我希望每个人都能单独打开/关闭。

<div class="tags">
    <ul>
        <li><span class="tag-trigger"></span></li>
        <li><a href="" class="guidance-note">Note</a></li>
    </ul>
    <ul>
        <li><a href="#">Tag one</a></li>
        <li><a href="#">Tage two</a></li>
    </ul>
    <ul class="tags-toggle-container">
        <li><a href="#">Tag 3</a></li>
        <li><a href="#">Tag 4</a></li>
        <li><a href="#">Tag 5</a></li>
    </ul>                           
</div>

和jquery -

$('.tags-toggle-container').hide();

$('.tag-trigger').click(function() {
    $('.tags-toggle-container').slideToggle('fast'); 
});

我无法弄清楚如何在个别基础上与“tags-toggle-container”进行交互。我认为如果标记不同，那么这可行，但我担心改变它不是一种选择。我看过其他的解决方案，但它们似乎都引用了.siblings或.closest。

$('.tags-toggle-container').hide();

$('.tag-trigger').click(function() {
$(this).find('ul.tags-toggle-container').slideToggle('fast'); 
});

由于

Answer 1

在DOM树中向上移动到最近的.tags div，然后向下移动到.tags-toggle-container：

$('.tag-trigger').click(function() {
   $(this).closest(".tags").find(".tags-toggle-container").slideToggle('fast'); 
});

Answer 2

查看您提供的HTML，您将找到如下元素：

$('.tags-toggle-container').hide();

$('.tag-trigger').click(function() {
    $(this).parents("ul").siblings(".tags-toggle-container").slideToggle('fast'); 
});

这假定.tags-toggle-container元素是您<ul>所在的.tag-trigger的直接兄弟。

Answer 3

如果我理解你的问题，你可以通过设置一个变量来计算。

var i = 0;
$(function() {
    $('.tag-trigger').click(function () {
        $( 'ul.tags-toggle-container > li' ).eq( i++ ).slideToggle();
    });
})

我认为你是在追求这样的事情。 Fiddle

一次打开一个元素

3 个答案: