Question

尝试在用户点击“阅读更多”的情况下重新制作此效果。并且生物扩展并且他们可以点击“显示更少”＆＃39;显示部分生物。我想也许是一些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仍然无效。

我已经了解到，使用大量.content.RTETextWrapper { display: none; }次调用进行导航的方式很难来导航DOM。

以下是Updated CodePen供您参考。

我只改变了两件事：

我添加了CSS以默认隐藏内容：

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

我使用closest和find修改了您的jQuery，以使用更可靠的方法查找相应的元素。而且，为了好玩，我投入了一些slideUp和slideDown动画：
```
{{1}}
```

阅读更多展开文字

1 个答案: