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

我还希望.toggle函数在他点击<h2>时发生。

如何调整上面的jQuery来包含它？

Answer 1

您可以将点击处理程序附加到点击h2的{{1}}，如下所示：

<p>

You can give it a try here，这会点击$('.ask').toggle(function() { $(this).text('-').next('.addtitle').slideDown('fast'); }, function() { $(this).text('+').next('.addtitle').slideUp('fast'); }).prev('h2').click(function() { $(this).next().click(); });触发<h2>上的click事件，并触发其.toggle()功能。这样做很重要，而不是在选择器中同时使用两者，因为切换的状态是每个元素，所以为了让它们保持同步你只想在一个地方。

Answer 2

添加：

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

jquery - 幻灯片切换

2 个答案: