0

我正在尝试在某些内容上实现手风琴样式框。然而，1 个模板上有 4-6 个这样的框，出于明显的原因，它们都有不同的类。但是，我想尝试使代码尽可能易于阅读，并且我不想为每个类名重复代码。我假设 jQuerys (this) 方法会起作用，但我不是 100% 确定如何使用它。

这是我的 JS 代码：

        <script type="text/javascript">
    $(document).ready(function(){
        $(".block-50_hoverHeader").click(function (){
           //alert("clicked");
            $(".scrollText").slideToggle(1000);

        });

        });


</script>

所以 .scrollText 类是一个 div，它保存了 onClick 函数之后需要显示的所有内容。但是目前，当我单击标题时，所有 .scollText div 都会出现在页面上。所以我希望它只出现在被点击的父标题 div 上。

这里的HTML：

<div class="block-50 left textHoverWrapOne">
    <img src="" alt="" /> (Image working as BG Image)
    <div class="block-50_hoverHeader"><p>This is a header!</p></div>
    <div class="block-50_textHoverOne trans_click scrollText">
        This is the content that needs to be displayed after the 
    </div>
</div>
4

3 回答 3

3

找到与scrollText单击block-50_hoverHeader元素的相对值。在这种情况下，它是下一个兄弟，因此您可以使用 .next()

事件处理程序内部this指向注册处理程序的元素，在这种情况下它是block-50_hoverHeader元素，所以我们可以找到下一个scrollText使用$(this).next()

jQuery(function ($) {
    $(".block-50_hoverHeader").click(function () {
        $(this).next().slideToggle(1000);
    });
});

演示：小提琴

于 2013-08-28T15:19:50.523 回答
0

为什么不针对整个div？

jQuery(function ($) {
    $(".block-50").click(function () {
        $(this).find('.scrollText').slideToggle(1000);
    });
});
于 2013-08-28T15:24:01.010 回答
0

有很多方法可以做到这一点。我更喜欢抓取共享父级，然后使用find，因为我发现由于对 html 结构的微小修改，这不太可能中断。

$(".block-50_hoverHeader").click(function (){

    $(this).closest(".textHoverWrapOne").find(".scrollText").slideToggle(1000);

});
于 2013-08-28T15:23:22.513 回答