Question

请帮忙。我无法在选项卡页面中使用readmore.js jquery插件触发.readmore（）函数，而它在第一个选项卡页面上运行良好，但在不活动的选项卡上运行不正常。这是我的问题。我有一个包含4个标签的页面，每个标签都有自己的内容。我读到了这个readmore.js，它修剪了长文本，可以选择将它扩展为readmore。以下是jsp片段 -

    <div class="tabbable">
        <ul class="nav nav-tabs padding-12 tab-color-blue background-blue" id="myTab4">
            <li class="active project_li_Tabs">
                <a class="anchorTabs bolder" data-toggle="tab" href="#details">Project Details</a>
            </li>

            <li class=" project_li_Tabs">
                <a class="anchorTabs bolder" data-toggle="tab" href="#tab1">Tab 1</a>
            </li>

            <li class=" project_li_Tabs">
                <a class="anchorTabs bolder" data-toggle="tab" href="#tab2">Alpha</a>
            </li>

        </ul>

        <div class="tab-content">
            <div id="details" class="tab-pane in active">

            <article> long text here..... </article>

            </div>

            <div id="tab1" class="tab-pane">

            <article> another long text here..... </article>

            </div>

            <div id="tab2" class="tab-pane">

            <article> another long text here..... </article>

            </div>

        </div> <!-- tab-content div ends here.. -->

        </div> <!-- tabbable div ends here.. -->

        <script src="../assets/js/jquery-2.0.3.min.js"></script>
        <script src="../assets/js/readmore.min.js"></script>

        <script type="text/javascript">


        jQuery(function($) {

        $('article').readmore({maxHeight: 100}); // This function applies good for the first tab, but when navigated to the next tab, the text is not trimmed..

        });

        </script>

在这里感谢您的帮助和建议。我尝试通过绑定到标签点击事件来应用此功能，但没有任何帮助。我还将此关联到div click事件，它仅在用户单击div选项卡（选项卡内的内容）时才有效，这与预期不符。

请帮忙......

Answer 1

我能够使用以下代码使其工作：

$(function() {
    $(document).on( 'shown.bs.tab', 'a[data-toggle=\'tab\']', function (e) {
           $('.article').readmore({
                moreLink: '<a href="#">Expand</a>',
                maxHeight: 100
            });
        })
});

Answer 2

我使用此代码。放一个＆＃34; readmore＆＃34;功能之前＆＃34; tab＆＃34;

<script type="text/javascript">
    jQuery(document).ready(function($){
       $('.article').readmore();
       $('#tabs').tabs();

    });
</script>

在选项卡内容中应用readmore.js功能

2 个答案: