Question

我对这段代码有疑问： HTML

       <h2>Lorem ipsum</h2>
       <p>Lorem ipsum dolor sit amet consectetuer ridiculus pellentesque Nunc libero Lorem. Auctor vel eget Donec adipiscing urna ullamcorper tincidunt enim auctor Vivamus. Pede wisi semper Praesent Sed non orci elit Integer dis et. Sed eu diam vitae et nibh eu interdum dui Nulla suscipit. Non tristique id elit at tempor Curabitur malesuada.</p>
       <span class="hidden fullArticle">
         <p>Lorem ipsum dolor sit amet consectetuer felis urna consectetuer Vivamus         sapien. Auctor nibh vel Fusce tortor habitant penatibus mattis hendrerit tincidunt Nullam. Et ac laoreet quis porta Sed adipiscing quis Nulla justo nibh. In ut Vestibulum tortor ligula dolor dis platea quis malesuada Nam. Eget leo augue sociis Sed Curabitur turpis    Nulla condimentum tortor magnis. Cursus suscipit faucibus ipsum sed.</p>
       </span>
       <p class="link"><a href="#">Show full article</a></p>

jquery JavaScript

    $(function() {

  /* hide full articles*/

  $(".hidden").hide();
  $("span.hidden").removeClass("hidden");

  /* showing and hiding of full articles */
  $(".link a").click(function(e) {
    e.preventDefault();
    var anchor = $(this);
    var article = $(this).parent().prev("span");
    article.slideToggle(1000, function(){
      if (anchor.text() == "Show full article")
        anchor.text("Hide article");
      else
        anchor.text("Show full article"); 
    });    
  });  

});

结果应该是当我单击锚点“显示完整文章”时，那么使用类fullArticle之前的范围应该是slideToggle，而锚点中的文本应该更改为“隐藏文章”。

之后当我点击“隐藏文章”时，它应该再次slideToggle并将文本更改为“显示完整文章”。

但有些事情是错误的，而且运作不正常。你能给我一些解决方案吗？谢谢您帮忙。还有jsFiddle http://jsfiddle.net/zYAcB/18/

Answer 1

看看 - http://jsfiddle.net/zYAcB/18/

我编辑了你的javascript：

$(function () {
    /* hide full articles*/

    $(".hidden").hide();

    /* showing and hiding of full articles */
    $(".link a").click(function (e) {
        e.preventDefault();
        var anchor = $(this);
        var article = $(this).parent().prev("div");
        article.slideToggle(1000);
        if (anchor.text() == "Show full article") {
            anchor.text("Hide article");
        } else {
            anchor.text("Show full article");
        }
    });
});

并取出了css中的.hidden { display: none; }位。

顺便一提 - 在<p>之类的内联元素中使用<span>等块级元素在语义上并不正确，所以我将其更改为<div>。

Answer 2

只需将<span>元素更改为<div>

即可正常工作

http://jsfiddle.net/zYAcB/30/

Answer 3

您的问题是，span为inline，您需要一个block级元素才能使slide生效。您可以将span设置为display:block，也可以将其替换为div。

slideToggle无法正常工作

3 个答案: