Question

我在点击锚标记时尝试做一个简单的slideToggle。应该使用slideToggle的文本包含在直接在锚标记之后编码的span标记中。我试过这样的东西，但它不起作用：

<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>

Answer 1

您的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>

Answer 2

删除find('span')。然后它对我有用：

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

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

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

然后选择jquery

2 个答案: