閱讀更多展開文本

Question

試圖在用戶點擊「閱讀更多」並且生物展開並且他們可以點擊「顯示更少」以顯示部分生物時重新制作此效果。我想也許這是一些JavaScript來顯示或隱藏HTML的不同部分。我翻譯了一部分html和Javascript，我認爲是創建了這個效果，並把它放到code.pen.io中，但它沒有工作..我做錯了什麼？

http://www.nealcommunities.com/about/management-team/

我的代碼筆嘗試：http://codepen.io/danieltaki/pen/VjJbkQ

HTML

<li> 
    <div class="excerpt RTETextWrapper"> 
     <div> 
      <p>Pat is a conscientious developer, a master builder and the visionary leader of Neal Communities. He is the third generation in his family to be a builder/developer in this community. A graduate of the esteemed Wharton School of Finance, he was a respected member of the Florida Legislature for 12 years, serving our community in the House of Representatives and the Senate, where he was appointed Chairman of the Senate Appropriations Committee. During this time, he was honored with every one of Florida’s top environmental awards. Since 1970, Pat Neal has built more than 10,000 homes with integrity and commitment in the finest communities, and the awards he has earned in his builder developer career continue to complement his political accomplishments. He is a respected leader and inspirational philanthropist. A snapshot of Pat Neal’s accomplishments:</p> 
      <ul> 
       <li>Florida State Senate 1978-86</li> 
       <li>Chairman, Senate Appropriations Committee</li> 
       <li>Chairman, Committee on Natural Resources</li> 
       <li>Member, Florida House of Representatives, 1974-78</li> 
       <li>Chair, Florida Commission on Ethics, 2000-01</li> 
       <li>Chair, Florida Commission on Ethics, 2002</li> 
      </ul> <a href="#" class="showMore">Read More...</a> 
     </div> 
    </div> 
    <!-- content --> 

    <div class="content RTETextWrapper"> 
     <div> 
      <p>Pat is a conscientious developer, master builder and visionary leader of Neal Communities. He is the third generation in his family to be a builder/developer in this community. A graduate of the esteemed Wharton School of Finance, he was a respected member of the Florida Legislature for 12 years, serving our community in the House of Representatives and the Senate, where he was appointed Chairman of the Senate Appropriations Committee. During this time, he was honored with every one of Florida’s top environmental awards. Since 1970, Pat Neal has built more than 10,000 homes with integrity and commitment in the finest communities, and the awards he has earned in his builder developer career continue to complement his political accomplishments. He is a respected leader and inspirational philanthropist. A snapshot of Pat Neal’s accomplishments:</p> 
      <ul> 
       <li>Florida State Senate 1978-86</li> 
       <li>Chairman, Senate Appropriations Committee</li> 
       <li>Chairman, Committee on Natural Resources</li> 
       <li>Member, Florida House of Representatives, 1974-78</li> 
       <li>Chair, Florida Commission on Ethics, 2000-01</li> 
       <li>Chair, Florida Commission on Ethics, 2002</li> 
       <li>Sierra Club Legislative Award, 1984</li> 
       <li>Florida Audubon Society Legislative Award, 1983</li> 
       <li>Professional Achievement Award, Professional Builder Magazine</li> 
       <li>Best master Planned Community in the United States (University Park), National Association of Home Builders and Professional Builder Magazine</li> 
       <li>Hearthstone Builder Public Service Honor Roll, Builder Magazine and Hearthstone Advisors, 2002</li> 
       <li>Advisory Board, The Trust for Public Land, Florida 2001-2002</li> 
       <li>Board of Directors, Florida TaxWatch, Inc. 1989, 2000-present</li> 
       <li>TIGER Award from the Florida Education Association/United 1983</li> 
       <li>Four-time recipient of the Florida Association of Community Colleges Legislative Service Award</li> 
       <li>Allen Morris Award for Most Effective Member of the Senate in Committee 1984</li> 
       <li>Future of the Region Award – Best Community, Tampa Bay Regional Planning Council (University Park)</li> 
       <li>Ed H. Price Humanitarian Award 2002</li> 
       <li>John A. Clarke Humanitarian Award 2007</li> 
       <li>Best Boss, Sarasota Biz941 2007</li> 
       <li>Community Leadership Award 2008</li> 
      </ul> <a href="#" class="showLess">...Read Less</a> 
     </div> 
    </div> 
    <!-- content --> 
    <div class="clear"></div> 
</li> 
</div> 
</div> 

JavaScript代碼

$(function(){  
    // expand 
    $('ul .showMore').click(function(){ 
     var $excerpt = $(this).parent().parent(); 
     $excerpt.hide(); 
     $excerpt.next('.content').show(); 
     return false; 
    }); 
    $('ul .showLess').click(function(){ 
     var $content = $(this).parent().parent(); 
     $content.hide(); 
     $content.prev('.excerpt').show(); 
     return false; 
    }); 
    $('ul .showMore').text('read more'); 
    $('ul .showLess').text('read less'); 
}); 

Answer 1

你確實忘記了在你的CodePen中包含jQuery，但是另外，原來的jQuery仍然不起作用。

我已經學會了用很多.parent()調用進行導航的困難方式是不是一個好方法來導航DOM。

這是Updated CodePen供您參考。

我只改變了兩件事情：

1. 我加入了CSS來隱藏默認內容：

   .content.RTETextWrapper { 
       display: none; 
   } 
   

2. 我修改了jQuery來使用尋找更可靠的方法適當的元素，使用closest和find。而且，爲了好玩，我扔在一些slideUp和slideDown動畫：

   // "No-conflict-safe" document ready 
   jQuery(function($) {   
       $('a.showMore').click(function() { 
        // Go UP the DOM and find the closest parent li, THEN find that li's .excerpt element 
        $(this).closest('li').find('.excerpt').slideUp('fast'); 
        // Go UP the DOM and find the closest parent li, THEN find that li's .content element 
        $(this).closest('li').find('.content').slideDown('slow'); 
        return false; 
       }); 
   
       $('a.showLess').click(function() { 
        $(this).closest('li').find('.excerpt').slideDown('slow'); 
        $(this).closest('li').find('.content').slideUp('fast'); 
        return false; 
       }); 
   });