jquery - 在 div 中定位链接时显示/隐藏文本不起作用

Question

为什么这个工作：http: //jsfiddle.net/4q5du/

而这不是：http: //jsfiddle.net/zcuYw/

我唯一要改变的是，在第二个中，我的目标是一个 div 中的链接，而在第一个中，我直接指向链接。为什么第二个不起作用？

$('div.more').hide()
$('a.showmemore').click(function(){
    $(this).next('div').slideToggle()
})

对比

$('div.more').hide()
$('div.maurice a').click(function(){
    $(this).next('div').slideToggle()
})

Answer 1

$('div.more').hide()
$('div.maurice a').click(function (e) {
    e.preventDefault(); // As in your example, you're click on anchor so you
                        // you need to prevent default anchor behavior

    $(this)
       .parent()      // jump to .maurice
       .next('div')   // got next div 
       .slideToggle() // show effect
})

Answer 2

它不起作用的原因。

你有这个代码

$('div.more').hide()
   $('div.maurice a').click(function(){
   $(this).next('div').slideToggle()
});

有了这个 HTML

<div class="maurice"><a href="#">Hello</a></div>
<div class="more">
    Hey Ohhhh
</div>

当你点击a你想滑动切换下一个div元素时，没有这样的东西，next()函数返回直接兄弟，所以在你的情况下，你需要上一层parent()，然后只使用next()

结果是

$('div.more').hide()
$('div.maurice a').click(function(){
   $(this).parent().next('div').slideToggle()
});

演示：http: //jsfiddle.net/zcuYw/1/

Answer 3

$('div.more').hide()
$('div.maurice a').click(function(e, ui) {
  e.preventDefault();
  $(this).parent().next('div').slideToggle()
})

你很害羞.parent()。

Answer 4

点击$('div.maurice a')不起作用原因next()

$(this).next('div').slideToggle();

在

<div class="maurice"> <a href="#">THIS</a>  NO ELEMENT HERE </div>
<div class="more">
    IT'S HERE!
</div>

不存在

您应该向上（.parent()或.closest('div')），而不是瞄准.next()