Question

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

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

VS

$('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(e, ui) {
  e.preventDefault();
  $(this).parent().next('div').slideToggle()
})

你很害羞.parent()。

Answer 3

它不起作用的原因。

你有这个代码

$('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 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()

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

4 个答案: