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

您可以将单击处理程序附加到单击<p>的h2，如下所示：

$('.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>触发.ask上的click事件，从而触发其.toggle()函数。重要的是这样做，而不是在选择器中使用两者，因为切换的状态是每个元素的，所以为了保持它们同步，您只需要将其放在一个位置。

Answer 2

添加：

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