滑动切换无法正常工作答案

【问题标题】：slideToggle doesn't work properly滑动切换无法正常工作
【发布时间】：2013-01-30 00:47:51
【问题描述】：

我对这段代码有疑问： 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 类的跨度应该是滑动切换，并且锚点中的文本应该更改为“隐藏文章”。

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

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

【问题讨论】：

标签： javascript jquery

【解决方案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; }位。

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

【讨论】：

还是不行。当我单击“显示全文”时，它显示它但不幻灯片。之后，当我点击“隐藏文章”时，它会立即再次滑动切换和滑动切换。
胡普斯。抱歉，我没有意识到你在写关于那个 div 的内容。当我将跨度更改为 div 时，它可以工作。非常感谢
@user2022400 - 不用担心，很高兴它有帮助。

【解决方案2】：

只要将<span> 元素更改为<div>，它就可以正常工作

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

【讨论】：

【解决方案3】：

您的问题是 span 是 inline 并且您需要 block 级别元素才能使 slide 工作。您可以将span 设置为display:block，也可以将其替换为div。

【讨论】：