展開閱讀更多/更少閱讀jQuery腳本

Question

我有這個偉大的腳本，它使用jQuery來顯示一小部分內容&允許用戶閱讀更多/閱讀更少的內容。 這是我目前的小提琴：http://jsfiddle.net/Tqwdh/1/

摘要：當你點擊圖像，它需要顯示更多的文字。

我很想知道如何更新此腳本，以允許用戶點擊關聯的圖像，它會顯示更多的文本（以及保持文本鏈接到位）。

有人可以告訴我怎麼做到這一點嗎？

這裏是我的榜樣HTML：

<article id="post-5" > 

      <div class="more-less">  
       <div class="more-block"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam purus, lacinia eget placerat sit amet, bibendum nec nisl. Curabitur a mattis ipsum. Praesent quis nisi in purus malesuada rhoncus. Pellentesque ut quam eget libero congue lobortis. Nunc sed quam ac erat lobortis eleifend. Donec elementum sodales cursus. Aliquam porttitor massa nisi, in laoreet turpis. Sed consequat condimentum lorem ut dignissim. Sed hendrerit mauris ut massa fermentum laoreet. Pellentesque a leo vitae enim dictum lobortis. Praesent commodo feugiat velit iaculis malesuada.</p> 
        <p>Phasellus id elit ac lacus faucibus ullamcorper. Etiam ullamcorper pretium tellus, ut pharetra ante pulvinar vel. Sed neque diam, semper vel rhoncus non, congue ut sapien. Integer a mi eget libero elementum lobortis. Donec hendrerit egestas ligula sit amet eleifend. Curabitur pharetra venenatis tempor. Quisque pulvinar malesuada justo, ut euismod arcu pharetra vitae. Cras lobortis, ligula id euismod euismod, ipsum risus varius urna, faucibus gravida lectus mi nec nulla. Fusce eleifend fringilla nibh ut vulputate. Vivamus sagittis leo metus. Etiam facilisis convallis lacus adipiscing hendrerit. Duis ultricies euismod libero, nec blandit est semper a. Phasellus sit amet justo sed quam elementum lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
       </div> 
      </div> 

      <p> 
       <a href="#" title="News Item 1"><img src="http://placehold.it/300x187" alt="News Item 1" width="300" height="187" /></a> 
      </p>    

     </article><!-- #post-## --> 

和我jQuery的：

$(function(){ 
     // The height of the content block when it's not expanded 
     var adjustheight = 130; 
     // The "more" link text 
     var moreText = "Click to read more..."; 
     // The "less" link text 
     var lessText = "Click to read less..."; 
     // Sets the .more-block div to the specified height and hides any content that overflows 
     $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden'); 
     // The section added to the bottom of the "more-less" div 
     $(".more-less").append('<p style="display:block;margin-top:8px"><a href="#" class="adjust"></a></p>'); 
     $("a.adjust").text(moreText); 
     $(".adjust").toggle(function() { 
       $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible'); 
       // Hide the [...] when expanded 
       $(this).parents("div:first").find("p.continued").css('display', 'none'); 
       $(this).text(lessText); 
      }, function() { 
       $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden'); 
       $(this).parents("div:first").find("p.continued").css('display', 'block'); 
       $(this).text(moreText); 
     }); 
     }); 

謝謝:-)

Answer 1

你可以只添加一個單擊處理程序IMG像這樣： DEMO

$(function(){ 
    $('img').click(function(){ 
     $(this).closest('article').find('.adjust').click(); 
    }); 
});​ 

Answer 2

您需要將邏輯從toggle handler移到您自己的實現中，因爲您有多個事件源。

<article id="post-5" > 
    <div class="more-less">  
     <div class="more-block">…</div> 
    </div> 
    <p> 
     <a href="#post-5" class="adjust" title="News Item 1">…</a> 
    </p>    
</article> 

$(function(){ 
    var adjustheight = 130; // The height of the content block when it's not expanded 
    var texts = { 
     more: "Click to read more…", 
     less: "Click to read less…" 
    }; 
    $("article").each(function() { 
     var block = $(".more-block", this).css({height:adjustheight, overflow:'hidden'}), 
      cont = $("p.continue", this), 
      toggle = $('<a href="#'+this.id+'" class="adjust">').text(texts.more), 
      open = false; 
     $(".more-less", this).append($('<p style="display:block;margin-top:8px">').append(link)); 
     $("a.adjust", this).click(function() { 
      open = !open; 
      block.css("height", open ? "auto" : adjustheight); 
      link.text(texts[open ? "less" : "more"]); 
      cont[open ? "show" : "hide"](); 
     } 
    }); 
}); 

Answer 3

只需添加的「點擊閱讀更多的」元素的圖像元素相同的行爲。

當您設置的切換處理程序是這樣的：

$(".adjust").toggle(function() { 
     $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible'); 
     // Hide the [...] when expanded 
     $(this).parents("div:first").find("p.continued").css('display', 'none'); 
     $(this).text(lessText); 
    }, function() { 
     $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden'); 
     $(this).parents("div:first").find("p.continued").css('display', 'block'); 
     $(this).text(moreText); 
    }); 

只是使用jQuery的multiple selector選擇圖像元素也，就像這個例子：

$(".adjust, #img1, #img2").toggle(function() { 
     $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible'); 
     // Hide the [...] when expanded 
     $(this).parents("div:first").find("p.continued").css('display', 'none'); 
     $(this).text(lessText); 
    }, function() { 
     $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden'); 
     $(this).parents("div:first").find("p.continued").css('display', 'block'); 
     $(this).text(moreText); 
    }); 

Demo

希望它幫助。