Question

我想在按下“阅读更多”按钮时进行切换效果，但是示例我在这里：JSFiddle切换工作正常，我想要更改的是按下按钮时的信息来自 <div class="answer"> 显示在按钮上方，而不是在按钮下方，因此当按下更多按钮时，按钮也会向下滑动。

我该怎么做？因为我现在没有任何想法...;）

Answer 1

将答案放在按钮上方并使用prev功能。 JSFiddle

Answer 2

您需要交换答案和按钮的顺序，然后更改jQuery。

$('.answer').slideToggle(500);

Answer 3

您可以在HTML标记中交换按钮和.answer的顺序：

<div class="answer">
    <p>
        Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit, sed diam nonummy nibh euismod
        tincidunt ut laoreet dolore magna aliquam erat
        volutpat. Ut wisi enim ad minim veniam, quis
        nostrud exerci tation ullamcorper suscipit
        lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
</div>
<input type="submit" value="READ MORE" id="readmore">

然后使用：

$(this).prev().slideToggle(500);

而不是：

$(this).next('.answer').slideToggle(500);

<强> Updated Fiddle

Answer 4

这样做在此工作 http://jsfiddle.net/nc72a/

注意：从p（.answer p {margin：0;}）中删除边距，这样它就不会波动......

<强> HTML

<div class="answer">
        <p>
            Lorem ipsum dolor sit amet, consectetuer
            adipiscing elit, sed diam nonummy nibh euismod
            tincidunt ut laoreet dolore magna aliquam erat
            volutpat. Ut wisi enim ad minim veniam, quis
            nostrud exerci tation ullamcorper suscipit
            lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
</div>
<input type="submit" value="READ MORE" id="readmore">

<强>的jQuery

$(document).ready(function() {
  $('#readmore').click(function() {
     $(this).prev('.answer').slideToggle(500);
     $(this).toggleClass('close');
  });
});

Answer 5

你不必重新发明轮子，有一个jquery插件http://plugins.learningjquery.com/expander/demo/index.html

Answer 6

这里的问题是元素的顺序。将<div clsss='answer'>放在按钮上方。

在这里查看：http://jsfiddle.net/n9XK3/2/

Answer 7

  $(document).ready(function() {
            $('#readmore').click(function() {

                $(this).prev('.answer').slideToggle(500);
                $(this).toggleClass('close');

            });
        }); // end ready

Answer 8

将answer按钮放在answer div之后并更改此jQuery行

$(this).next('.answer').slideToggle(500);

这个

$(this).prev().slideToggle(500);

因为按钮将在div之后而不是之前。

Answer 9

这里是http://jsfiddle.net/codingantGit/qECA6/

<script type="text/javascript">

          $(document).ready(function() {
              $('#readmore').click(function() {

                   if( ! $('.answer').is(':visible') )
                      $('.answer').slideDown(500);
                    else
                       $('.answer').slideUp(500);

               });
           }); 

     </script>



    <section id="faq-list">
        <h5>Is it true that you are a carrot?</h5>
        <p>
            Lorem ipsum dolor sit amet, consectetuer
            adipiscing elit, sed diam nonummy nibh euismod
            tincidunt ut laoreet dolore magna aliquam erat
            volutpat. Ut wisi enim ad minim veniam, quis
            nostrud exerci tation ullamcorper suscipit
            lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <div class="answer" style='display:none;'>
            <p>
                Lorem ipsum dolor sit amet, consectetuer
                adipiscing elit, sed diam nonummy nibh euismod
                tincidunt ut laoreet dolore magna aliquam erat
                volutpat. Ut wisi enim ad minim veniam, quis
                nostrud exerci tation ullamcorper suscipit
                lobortis nisl ut aliquip ex ea commodo consequat.
            </p>
        </div>
        <input type="submit" value="READ MORE" id="readmore">

Answer 10

更新了小提琴。只是改变元素的顺序。

   [1]: http://jsfiddle.net/n9XK3/21/

Jquery切换以及阅读更多按钮

10 个答案: