0

我正在使用 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都会显示而不是我点击的单个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 应用于它，但我要么没有正确执行，要么就是无法正常工作。

4

1 回答 1

0

在您的代码中，您正在做什么，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;
    });
});

在这里，我们从单击链接父级中找到所需的子级并切换幻灯片功能。

于 2012-11-22T06:16:48.930 回答