0

我试图做一个阅读更多，阅读更少的功能。

该功能似乎工作，只是不正确。

加载按钮说阅读更多，但它没有显示较短的版本。

然后，当您单击按钮时，它会立即更改所有幻灯片，而我只想在单击时移动一个。

我确定它很容易解决，但我是 jquery 的新手，所以在创建最简单的函数时遇到了麻烦

谢谢

<div class="team-member">

<div class="image">
    <img width="120" height="120" />
</div>

<div class="text">
    <h3>Mr John Kuo <span>LLB</span></h3>
    <h4>Executive Director and Chief Operating Officer</h4>


<div class="more-less">    
    <div class="more-block">

    <p>Mr Kuo has more than 10 years’ experience in international import &amp; exporting, commodities trading, international business development and strategic alliance planning. Before Resources, he was the vice general manager for BAAO Mining which is a Chinese raw material trading company based in Tianjin, China.</p>

    <div class="full-text">
        <p>Mr Kuo has more than 10 years’ experience in international import &amp; exporting, commodities trading, international business development and strategic alliance planning. Before Resources, he was the vice general manager for BAAO Mining which is a Chinese raw material trading company based in Tianjin, China.</p>
 <p>Mr Kuo has more than 10 years’ experience in international import &amp; exporting, commodities trading, international business development and strategic alliance planning. Before Resources, he was the vice general manager for BAAO Mining which is a Chinese raw material trading company based in Tianjin, China.</p>
 <p>Mr Kuo has more than 10 years’ experience in international import &amp; exporting, commodities trading, international business development and strategic alliance planning. Before Resources, he was the vice general manager for BAAO Mining which is a Chinese raw material trading company based in Tianjin, China.</p>
                                </div>

                            </div>
                        </div>


        <div class="more-link">
        <a href="#"><span class="icon"></span><span class="text">View More</span></a>
                        </div>



                </div>

            </div>


            <div class="team-member">

                <div class="image">
                    <img width="120" height="120" />
                </div>

                <div class="text">
                    <h3>Mr. Bon Jun<span></span></h3>
                    <h4>Non-Executive Director</h4>


        <div class="more-less">    
            <div class="more-block">

                <p>Mr Li holds a Bachelor of Mechanical Engineering degree from the Beijing Architecture Engineering University. He has worked for one of the biggest state owned company which has imported plant and e company under Thyssen in Germany and then moved to  to work as the Managing Director of Golden Mall Enterprise until 1999.</p>

                                <div class="full-text">
                                    <p>Mr. Li has rich experience in connecting foreign companies with enterprises and ever been involved in more than big projects with success. At present Mr. Li is the Limited in Beijing providing consulting services to clients globally In recent years Mr. Li has assisted Australian resources companies in establishing relationship with customers in leading to a number of successful projects.</p>
                                </div>

                            </div>
                        </div>


                        <div class="more-link">
                            <a href="#"><span class="icon"></span><span class="text">View More</span></a>
                        </div>



                </div>

            </div>

这是jquery

$(".team-member .more-link span.text").click(function(){
 var moreAndLess = $(".full-text").is(':visible') ? 'View More' : 'View Less';
$(this).text(moreAndLess);

 $(".full-text").slideToggle();
 });

 $(".team-member .more-link a").click(function(event) {
event.preventDefault();
$('<div/>')
.append('default ' + event.type + ' prevented')
.appendTo('#log');
});

这是它的外观，

http://jsfiddle.net/strohy85/6pEfg/1/

我得到了一个版本，但它有点错误，如果你按视图更多视图少几次，它会显示应该隐藏的链接，不知道为什么。 http://jsfiddle.net/strohy85/6pEfg/8/

4

4 回答 4

0

使用此代码

html

<div class="team-member">

<div class="image">
    <img width="120" height="120" />
</div>

<div class="text">
    <h3>Mr John Kuo <span>LLB</span></h3>
    <h4>Executive Director and Chief Operating Officer</h4>


<div class="more-less">    
    <div class="more-block" >

    <p>Mr Kuo has more than 10 years’ experience in international import &amp; exporting, commodities trading, international business development and strategic alliance planning. Before Resources, he was the vice general manager for BAAO Mining which is a Chinese raw material trading company based in Tianjin, China.</p>

    <div class="full-text" style="display:none;">
        <p>Mr Kuo has more than 10 years’ experience in international import &amp; exporting, commodities trading, international business development and strategic alliance planning. Before Resources, he was the vice general manager for BAAO Mining which is a Chinese raw material trading company based in Tianjin, China.</p>
 <p>Mr Kuo has more than 10 years’ experience in international import &amp; exporting, commodities trading, international business development and strategic alliance planning. Before Resources, he was the vice general manager for BAAO Mining which is a Chinese raw material trading company based in Tianjin, China.</p>
 <p>Mr Kuo has more than 10 years’ experience in international import &amp; exporting, commodities trading, international business development and strategic alliance planning. Before Resources, he was the vice general manager for BAAO Mining which is a Chinese raw material trading company based in Tianjin, China.</p>
                                </div>

                            </div>
                        </div>


        <div class="more-link">
        <a href="#"><span class="icon"></span><span class="text">View More</span></a>
                        </div>



                </div>

            </div>


            <div class="team-member">

                <div class="image">
                    <img width="120" height="120" />
                </div>

                <div class="text">
                    <h3>Mr. Bon Jun<span></span></h3>
                    <h4>Non-Executive Director</h4>


        <div class="more-less">    
            <div class="more-block">

                <p>Mr Li holds a Bachelor of Mechanical Engineering degree from the Beijing Architecture Engineering University. He has worked for one of the biggest state owned company which has imported plant and e company under Thyssen in Germany and then moved to  to work as the Managing Director of Golden Mall Enterprise until 1999.</p>

                                <div class="full-text">
                                    <p>Mr. Li has rich experience in connecting foreign companies with enterprises and ever been involved in more than big projects with success. At present Mr. Li is the Limited in Beijing providing consulting services to clients globally In recent years Mr. Li has assisted Australian resources companies in establishing relationship with customers in leading to a number of successful projects.</p>
                                </div>

                            </div>
                        </div>


                        <div class="more-link">
                            <a href="#"><span class="icon"></span><span class="text">View More</span></a>
                        </div>



                </div>

            </div>

和Javascript

<script>

        $(".team-member .more-link span.text").click(function(){
            //alert($(".full-text").attr('style'));
            var moreAndLess = ($(".full-text").attr('style') == "") ? 'View More' : 'View Less';
            $(this).text(moreAndLess);


             $(".full-text").slideToggle();
             });

             $(".team-member .more-link a").click(function(event) {
            event.preventDefault();
            $('<div/>')
            .append('default ' + event.type + ' prevented')
            .appendTo('#log');

            });

        </script>

它将按您的预期工作。

于 2013-04-23T07:58:47.153 回答
0

可能你需要这样的东西：

$(".team-member .more-link span.text").click(function () {
  var moreAndLess = $(this).text() == 'View More' ? 'View Less' : 'View More';
  $(this).text(moreAndLess);
  $(".full-text").slideToggle();
});

并且您的 html 稍微更改了样式display:none或创建了一个 css 类并将display属性放入none：

<div class="full-text" style='display:none;'>

在 CSS 类中：

.full-text{
   display:none;
}

结帐小提琴

于 2013-04-23T08:10:17.620 回答
0

嗨，我能够复制您的问题的一部分，您希望为您的 div 提供向下滑动的动画。

请参阅此链接了解更多详情。

它的主要jist是具有jqueryanimate()功能。

 $(this).prev().animate({
        height: '300'
    }, 500);
    $(this).text('Read Less');

不幸的是，该animate()函数有一些限制，因为它不能为元素的autocss 属性设置动画。因此有代码动画到 300px。

于 2013-04-23T08:56:51.117 回答
0

我找到了解决方案，这里是 jsfiddle

http://jsfiddle.net/strohy85/Hg7pD/3/

$(document).ready(function () {
 $('.full-text').hide();

 $('.view-btn').click(function (event) {
    event.preventDefault();
    $(this).parent().find('.full-text').slideToggle('slow');
    $(this).text($(this).text() == 'Read less...' ? 'Read more...' : 'Read less...');
 });
});
于 2013-04-30T06:37:32.827 回答