jquery这个选择然后下一个

jquery这个选择然后下一个

问题描述:

我试图做一个简单的slideToggle当一个锚点标签被点击。应该滑动的文本被封装在直接在锚标签之后编码的span标签中。我想是这样的,但它没有工作:jquery这个选择然后下一个

<script> 
$('#rp-help-main a').click(function() { 
    $(this).next().find("span").slideToggle('slow', function() { 
    // Animation complete. 
    }); 
}); 
</script> 

下面是一个简单的html:

<div id="rp-add-note"> 
<h4>Add note tool</h4> 
<p> 
This tool allows you to <strong>add a note</strong> anywhere in your room. Simply move your cursor to where you'd like your note to appear and left-click.<a href="#" onclick="return false">expand more</a> <span>A text box will appear. Once you type your note choose SAVE and your note will be inserted directly into your room. 
<br /><br /> 
Move your note using the selection tool. Simply click on the note and drag it where you'd like it to appear. To delete, click on the note to view the text box again. Once the text box appears, click REMOVE TEXT 
</span> 
</p> 
</div> 

    <div id="rp-undo-tool"> 
<h4>Undo tool</h4> 
<p> 
Click on this button at any time to <strong>undo your last action</strong>. Note: This will only undo your last action, it will not... <a href="#" onclick="return false">expand more</a> <span>continue to undo previous actions. 
</span> 
</p> 
</div> 
+0

为了获得更好的效果,请界定“不工作”。 –

删除find('span')。然后,它的工作对我来说:

$('#wrapper a').click(function() { 

    $(this).next().slideToggle('slow', function() { 
     // Animation complete. 
    }); 
}); 

http://jsbin.com/exovos/3/edit

+0

感谢这很好。 – zach

你的jQuery附加一个单击处理程序#rp-help-main a,但该ID没有元素的标记存在你发布了。

您将需要修改您的jQuery以引用现有元素,或修改您的标记以包含具有该ID的元素。

此外,您的jQuery代码可能会在元素存在于DOM之前执行。它需要在代码中,将执行当页面加载完成后进行封装:

<script> 
$(function() { 
    $('#rp-help-main a').click(function() { 
     $(this).next().find("span").slideToggle('slow', function() { 
     // Animation complete. 
     }); 
    }); 
}); 
</script> 
+1

'此外,您的jQuery永远不会执行'是不正确的。它被执行,但可能在浏览器解析元素之前。 – binarious

+0

谢谢。纠正。 –