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

});

その結果、アンカーの[記事全体を表示]をクリックすると、その前のスパンがfullArticleクラスでslideToggleになり、アンカーのテキストが[記事を非表示]に変更されます。

その後、[記事を非表示]をクリックすると、もう一度slideToggleして、テキストを[記事全体を表示]に変更する必要があります。

しかし、何かが間違っていて、正しく機能していません。解決策を教えていただけますか？お手伝いありがとうございます。jsFiddlehttp : //jsfiddle.net/zYAcB/18/もあります

4

3 に答える 3

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>ので、代わりに変更しました<div>。

于 2013-01-29T16:39:51.023 に答える
2

<span>要素を次のように変更するだけで正しく機能します<div>

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

于 2013-01-29T16:45:13.387 に答える
0

あなたの問題は、aspanがあり、動作するためにレベル要素inlineが必要なことです。に設定するか、に置き換えることができます。blockslidespandisplay:blockdiv

于 2013-01-29T16:47:51.470 に答える