jQuery的 - 幻燈片切換

Question

我哈弗以下HTML：

<div class="community-topic"> 
    <h2><b>Ask</b> a Question</h2> 
    <p class="ask">+</p> 
    <div class="addtitle"> 
     <p>Give your Question a great title</p> 
     <form name="input" action="submit.php"> 
     <input id="title" type="text" name="title" /> 
     <input id="go" type="submit" value="Go" /> 
     </form> 
     <a href="discuss.php?style=question">See more questions</a> 
    </div> 

那麼下面的jQuery：

$('.ask').toggle(function() { 
    $(this).text('-').next('.addtitle').slideDown('fast'); 
}, function() { 
    $(this).text('+').next('.addtitle').slideUp('fast'); 
}); 

我也希望在<h2>他點擊的情況發生.toggle功能。

如何調整上述jQuery以包含此？

Answer 1

您可以附加一個單擊處理程序到h2是點擊<p>這樣的：

$('.ask').toggle(function() { 
    $(this).text('-').next('.addtitle').slideDown('fast'); 
}, function() { 
    $(this).text('+').next('.addtitle').slideUp('fast'); 
}).prev('h2')​​​.click(function() { 
    $(this).next().click(); 
});​ 

You can give it a try here，這使得在<h2>觸發一個click事件上的點擊.ask，發射它的.toggle()功能。重要的是這樣做，而不是在選擇器中同時使用兩者，因爲切換狀態爲，每個元素，因此爲了讓它們保持同步，您只需要在一個位置。

Answer 2

地址：

$('.community-topic h2').toggle(function() { 
    $(this).next('.addtitle').slideDown('fast'); 
}, function() { 
    $(this).next('.addtitle').slideUp('fast'); 
});