2011-09-07 90 views
0

我試圖做一個簡單的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

爲了獲得更好的效果,請界定「不工作」。 –

回答

0

刪除find('span')。然後,它的工作對我來說:

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

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

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

+0

感謝這很好。 – zach

0

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

謝謝。糾正。 –

相關問題