Question

我正在尝试在某些内容上实现一个手风琴样式框。然而，在1个模板上有4-6个这样的盒子，由于显而易见的原因，它们都有不同的类别。但是我想尝试使代码尽可能易于阅读，我不想复制每个类名的代码。我很乐意jQuerys（这个）方法可行，但我不是100％肯定如何使用它。

这是我的JS代码：

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

        });

        });


</script>

因此.scrollText类是包含onClick函数之后需要显示的所有内容的div。但是目前当我点击标题时，页面上会出现所有.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>

Answer 1

找到相对于点击的scrollText元素的block-50_hoverHeader。在这种情况下，它是下一个兄弟，所以你可以使用.next（）

事件处理程序this内部指向处理程序注册的元素，在这种情况下它是block-50_hoverHeader元素，因此我们可以使用{{找到下一个scrollText 1}}

$(this).next()

演示：Fiddle

Answer 2

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

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

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

});

Answer 3

为什么不针对整个div ??

jQuery(function ($) {
    $(".block-50").click(function () {
        $(this).find('.scrollText').slideToggle(1000);
    });
});

jQuery函数只在单击的元素上运行

3 个答案: