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'); 
});