jquery - 引用嵌套类让 JQuery 点击工作

Question

我有一个应该切换 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>

Answer 1

这是因为您没有 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);
    });
});