javascript - 阅读更多 展开文字

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

事实上，您确实忘记了将 jQuery 包含在您的 CodePen 中，但另外，已安装的 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;
       });
   });