Question

这是我的jQuery：

$('.ask').click(function() {
    $('.addtitle').slideToggle('fast', function() {
    // Animation complete.
    });
});

我的HTML：

                            <p class="ask">+</p>
                                <div class="addtitle">
                                    <p>Give your Idea a great title</p>
                                    <form name="input" action="#" method="get">
                                        <input id="title" type="text" name="title" />
                                        <input id="go" type="submit" value="Go" />
                                    </form> 
                                </div>

我在页面上有多个.ask div，我只希望它影响名为.ask的.next（）div，而不是所有div命名的.ask。

我也想将'+'字符.toggle（）转换为' - '

有人可以帮忙吗？

Answer 1

你可以使用.next()和.toggle()这样做：

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

.next(selector)如果匹配选择器，则获取下一个兄弟，如果中间可能存在某些内容，则在每个{{1}上提供的函数之间使用.nextAll('.addtitle:first')，.toggle()个循环事件，所以它会交换文本并在每次点击时适当滑动。

Answer 2

$('.ask').click(function() {
  var $this = $(this);

  $this.find('.addtitle').slideToggle('fast', function() {
     // Animation complete.
     if($this.text() === '-')
        $this.text('+');
     else
        $this.text('-');
  });
});

jQuery .click（）。togog（） - 更改显示和交换字符

2 个答案: