0

这是我的 HTML

<div id="page-wrap">
  <div id="tab">
    <ul class="nav">
      <li class="nav-one"><a href="#tab1" class="current">Featured</a></li>
      <li class="nav-two"><a href="#tab2">Core</a></li>
      <li class="nav-three"><a href="#tab3">jQuery</a></li>
      <li class="nav-four last"><a href="#tab4">Classics</a></li>
    </ul>
    <div class="list-wrap">
      <div id="tab1">
        <div class="readmore">Nam tincidunt tempus justo sed aliquam. Sed rhoncus, augue at hendrerit semper, lectus leo varius ndivla, sit amet laoreet sem quam in ipsum. Aenean eget nunc a arcu ornare consequat. Mauris arcu elit, dictum sed aliquet sed, blandit vel arcu. Aliquam id ligdiva justo. Donec et magna id risus hendrerit mattis vitae sed leo. Donec molestie condimentum venenatis. In imperdiet, diam vel vehicdiva fringilla, dolor massa condimentum dolor, ac consequat dui augue sit amet ndivla. Vestibdivum ante ipsum primis in faucibus orci luctus et divtrices posuere cubilia Curae; Ndivla facilisi. Vestibdivum ante ipsum primis in faucibus orci luctus et divtrices posuere cubilia Curae; Ndivlam quis porttitor risus. Vestibdivum felis elit, accumsan non divtrices vel, posuere at mi. Integer mollis turpis vitae magna aliquet tincidunt. Donec nec diam eu odio venenatis faucibus. Donec convallis placerat mauris vitae vdivputate. </div>
      </div>
      <div id="tab2" class="hide">
        <div class="readmore">Sed interdum sem id sem ultrices eget tempus sem rhoncus. In ullamcorper elit at tellus cursus vestibulum mattis lacus vulputate. Etiam elit mi, sagittis ut feugiat vitae, suscipit eu nisl. Praesent bibendum tortor quis felis iaculis ac ullamcorper felis vehicula. Nam vitae sem ante, eu consequat nunc. Maecenas et mattis tellus. Vestibulum lacinia mauris eu nulla rutrum interdum. Fusce imperdiet leo ut tortor dapibus id mattis magna elementum. Sed vulputate tristique dapibus. Vivamus semper ullamcorper libero, ac bibendum leo vestibulum auctor. Aliquam tellus enim, bibendum at pretium vitae, porta at mauris. Aliquam erat volutpat. Morbi rutrum elementum felis, vel ullamcorper massa semper ullamcorper. Mauris ut velit lectus. </div>
      </div>
      <div id="tab3" class="hide">
        <div class="readmore">Phasellus porttitor mattis quam, eget sodales sapien cursus et. Etiam elementum volutpat nisi, sit amet hendrerit elit lobortis scelerisque. Donec tincidunt massa nec leo facilisis a sodales risus viverra. Etiam consectetur porttitor adipiscing. Nam id turpis massa. Suspendisse tincidunt, nunc non ultrices consequat, diam erat scelerisque massa, quis porta diam leo in quam. Nam varius, nunc ut luctus viverra, augue leo dapibus risus, et condimentum urna mi vel metus. Quisque pellentesque eleifend eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ultricies vulputate neque eu consequat. Suspendisse vitae felis erat, ultrices sagittis risus. Sed vel nulla tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus urna mauris, volutpat et pharetra id, faucibus eu metus. Vivamus luctus felis in lacus varius non semper turpis ullamcorper. Fusce eleifend mi ut nisl viverra venenatis. </div>
      </div>
      <div id="tab4" class="hide">
        <div class="readmore">Morbi erat magna, ultricies ac semper ac, ornare et nunc. Etiam et lorem ut eros eleifend dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sit amet sodales dolor. Etiam ut nisl at erat vulputate ultrices. Pellentesque dictum dapibus lectus in laoreet. Vestibulum in velit a lacus varius congue a ut felis. Aliquam consectetur, felis ac porta ultrices, sem ipsum tristique metus, quis feugiat massa neque eget odio. Donec sit amet nunc magna. Vestibulum pulvinar pretium dui ut gravida. Suspendisse potenti. In pharetra rhoncus ipsum vel rhoncus. Nulla ut lacus enim. Ut sit amet enim at neque elementum sollicitudin nec a mi. Praesent ultricies, metus malesuada imperdiet rutrum, sapien est pretium urna, et convallis orci orci vitae erat. Vivamus at ligula lacus, nec consequat nibh. </div>
      </div>
    </div>
  </div>
</div>

这是我的 jQuery 脚本，我尝试在同一个 div 中同时使用两个 pluings

$(document).ready(function() {
    $(function() {
        $("#tab").organicTabs({
            "speed": 250
        });
    });

    $(".readmore").each(function() {
        if ($(this).text().length > 200) {
            $(function() {
                $('div.readmore').expander({
                    slicePoint: 200,
                    expandSpeed: 1000,
                    collapseSpeed: 1000,
                    expandText: 'Read More',
                    userCollapseText: 'Hide Text'
                });
            });
        }
    });
});

使用整个东西，我只为第一个选项卡获得完美的输出，有时也是如此。

这是一个工作小提琴示例http://jsfiddle.net/RWnBQ/

4

1 回答 1

1

您在这里不需要doc ready处理程序：http: //jsfiddle.net/RWnBQ/1/

$(".readmore").each(function () {
    if ($(this).text().length > 200) {
      //--- doc ready removed from here
            $('div.readmore').expander({
                slicePoint: 200,
                expandSpeed: 1000,
                collapseSpeed: 1000,
                expandText: 'Read More',
                userCollapseText: 'Hide Text'
            });
      //--- doc ready removed from here
    }
});
于 2013-02-02T08:21:43.207 回答