Question

在html视图中，我想显示一些文字，但我只想向用户显示整个文本的百分比，如果用户想要查看剩余部分，他/她需要单击一个href /按钮。现在我隐藏了整个文本。

href的代码

    <div>
        <h3 id="single-desc">
            <a href="#" id="AboutBtn" class="GameInfo">{$l.about_the_game}</a>
        </h3>
    </div>

文字展示位置的代码。

    <div hidden id="showAbout">

        <p id="AboutText">
            {$game->description}
        </p>
    </div>

JavaScript切换文本hide / show

$("#AboutBtn").on('click', function (e) {
    e.preventDefault();
    $("#showAbout").slideToggle('slow');
});

谢谢。

Answer 1

这是dinamyc最多的方式！

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var fullText = $(".text").attr('fullText'); // get fullText attribute 
    $(".text").html(fullText.substr(0,1)); // insert only the first character from the fullText attribute 
    $("#myLink").click(function(e){
        e.preventDefault();
        $(".text").html(fullText);
    });
});
</script>
</head>
<body>

<p class="text" fullText="Fresh Fruits and Vegetables"></p>
<a href='#' id="myLink">Show Whole Text</a>

</body>
</html>

祝你好运!!!

如何显示前X个字符，然后单击一个href以显示其余的字符。

1 个答案: