jquery - 引用嵌套类以使JQuery单击以起作用

我有一个应该用于切换div的按钮，但我无法获得单击功能来指向该按钮。有什么建议吗？

<div class="container">
    <div id="da-slider" class="da-slider">
        <div class="da-slide">
            <h2>About us</h2>
            <p>fsdffjasieffnain</p>
            <div id="test" class="da-link">Read more</div>
            <div class="da-img"><img src="images/1.png" alt="image01" /></div>
        </div>
    </div>
</div>
<div class="layer1">
        <h1 class="click">click</h1>
         <div class="content">This is the text to hide</div>
</div>

我的无效的Jquery代码如下所示

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".content").hide();
        //toggle the componenet with class msg_body
        jQuery(".da-slider .da-slide .da-link").click(function() {
            jQuery(this).next(".content").slideToggle(500);
        });
    });
</script>

可行的jQuery代码如下所示

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".content").hide();
        //toggle the componenet with class msg_body
        jQuery(".click").click(function() {
            jQuery(this).next(".content").slideToggle(500);
        });
    });
</script>

最佳答案

这是因为您没有DIV .content作为.next()元素。尝试：

jQuery(this).closest('.container').next("div").find('.content').slideToggle(500);

您必须更仔细地看一下jQuery提供的所有DOM遍历方法：

http://api.jquery.com


顺便说一句，而不是在整个地方重写jQuery一词：

jQuery(function( $ ) {
    $(".content").hide();
    $(".da-slider .da-slide .da-link").click(function() {
        $(this).closest('.container').next("div").find('.content').slideToggle(500);
    });
});

关于jquery - 引用嵌套类以使JQuery单击以起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17035615/