Question

我正在使用jQuery隐藏/显示内容并且它可以工作，但不是我想要的方式。我的元素的层次结构如下：

<div class="row">
    <div class="column">
        <a href="">Show/Hide</a>
    </div>
    <div class="column hide-id">blahblahblah</div>
</div>

以下是代码：

$(document).ready(function(){   
    $('.hide-id').hide();
    $('.column > a').click(function() {
        $('.hide-id').slideToggle(500);
            return false;
        });
    });
});

问题在于：

$('.hide-id').slideToggle(500);

它工作正常，但我有几次重复这个“hide-id”类，这意味着每次我点击“.column a”时，每个带有“hide-id”的div都显示而不是单个的我点击。

我试过它的变体，如：

$(this).parent().next().slideToggle(500);
this = .column a + .parent() = .column + .next() = .column that contains .hide-id

但是，当我将.slideToggle从.hide-id更改为其他应该有效的内容时，脚本会响应我的选择器无效，因为它根本不响应。

有没有办法让$('.hide-id').slideToggle(500);工作，还是我需要找到替代方案？我已经尝试过将.each应用到它，但我要么没有正确地执行它，要么它只是不起作用。

Answer 1

在您的代码中，您正在做的是when you click the show/hide link you are toggling all the .hide-id class object，因此您可以这样做：http://jsbin.com/obemoc/1/edit

$(document).ready(function(){   
   $('.hide-id').hide();
      $('.column > a').click(function() {
        $(this).parents('div.row').children('.hide-id').slideToggle(500);
        return false;
    });
});

这里我们通过点击链接父级并切换幻灯片功能找到所需的孩子。

jQuery .slideToggle根据特异性不起作用

1 个答案: