1

我对这段代码有疑问：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"); 
    });    
  });  

});

结果应该是，当我单击锚点“显示全文”时，它前面的全篇类的跨度应该是滑动切换，并且锚点中的文本应该更改为“隐藏文章”。

之后，当我单击“隐藏文章”时，它应该再次滑动切换并将文本更改为“显示全文”。

但是出了点问题，它不能正常工作。你能给我一些解决方案吗？感谢您的帮助。还有jsFiddle http://jsfiddle.net/zYAcB/18/

4

3 回答 3

2

It works properly if you just change your <span> element to <div>

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

于 2013-01-29T16:45:13.387 回答
2

看看 - 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");
        }
    });
});

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

<p>顺便说一句 -在行内元素中包含块级元素在语义上是不正确的，<span>所以我将其改为 a <div>。

于 2013-01-29T16:39:51.023 回答
0

你的问题是，span你inline需要一个block水平元素slide才能工作。您可以将其设置span为display:block，也可以将其替换为div.

于 2013-01-29T16:47:51.470 回答