Javascript 如何显示前X个字符，然后单击a href以显示其余字符。_Javascript_Jquery_Html_Slidetoggle

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

javascript jquery html

Javascript 如何显示前X个字符，然后单击a href以显示其余字符。,javascript,jquery,html,slidetoggle,Javascript,Jquery,Html,Slidetoggle,在html视图中，我想显示一些文本，但我只想向用户显示整个文本的一部分，如果用户想查看其余文本，则需要单击href/按钮。正如现在一样，我隐藏了整个文本 href的代码 <div> <h3 id="single-desc"> <a href="#" id="AboutBtn" class="GameInfo">{$l.about_the_game}</a> </h3>

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

href的代码

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

谢谢。

这是最普通的方式

    <!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>


$（文档）.ready（函数（）{
var fullText=$（“.text”）.attr（'fullText'）；//获取全文属性
$（“.text”）.html（fullText.substr（0,1））；//仅插入fullText属性中的第一个字符
$（“#myLink”）。单击（函数（e）{
e、 预防默认值（）；
$（“.text”）.html（全文）；
});
});

祝你好运

谢谢你的回答@davidpankov。您的解决方案还可以，但我需要切换幻灯片效果，而且用户可以返回到仅查看前X个字符。幻灯片切换仅用于上下幻灯片…而不是根据需要“向右”

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

    <!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>