无法定位子元素，但对父元素很好

Question

我正在尝试使用jQuery在下面的代码中定位a.click。单击a.click时，p.excerpt应向下滑动到其下方。

出于某种原因，当我定位a.click时，jQuery 不会做任何事情 - 单击它时没有任何反应。但是，如果我以父div 为目标，则下滑工作正常。

知道我做错了什么吗？

这是 HTML：

<div class="listing">
    <div class="col-xs-4 title">
        <strong><a class="click">The Title</a> </strong>
        <p class="excerpt">The Excerpt.</p>
    </div>
</div>

这是不起作用的jQuery：

jQuery( ".listing .title a.click" ).click(function() {
     jQuery( "p.excerpt", this ).slideToggle( "slow", function() {
     });
});

这是工作正常的jQuery：

jQuery( ".listing .title" ).click(function() {
     jQuery( "p.excerpt", this ).slideToggle( "slow", function() {
     });
});

Answer 1

您的选择器是正确的。尝试：

jQuery( ".listing .title a.click" ).click(function(e) {
     e.preventDefault();
     jQuery(this).parent().next("p.excerpt").slideToggle( "slow", function() {
     });
});

您需要导航到锚点的父级，然后它的下一个元素是p.excerpt元素。使用语法jQuery( "p.excerpt", this )查找作为 a.click 元素后代的p.excerpt。（该处理程序中的this表示锚元素）