阅读更多展开文本

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