Question

我完全迷失在这里。我正在尝试仅使用一行文本在我的网站上显示信息。如果需要显示更多信息，额外信息将显示在第二行。但是，如何隐藏第二行并显示“显示更多”按钮呢？

用户点击show more按钮后，第二行的额外信息/文本将仅显示。感谢...

下面是我的按钮javascript，我不知道如何编码html部分，第二行将自动隐藏，并显示“显示更多”按钮。

var hide2 = 1;    
$('#showmorerates').click(function(){
            if(hide2 == 1){
                $('.morerates').toggle(300);
                document.getElementById("showmorerates").innerHTML = '<a>Show Less</a>';
                hide2 = 0;
            } else {
                $('.morerates').toggle(300);
                document.getElementById("showmorerates").innerHTML = '<a>Show More</a>';
                hide2 = 1;
            }
    });

Answer 1

请参阅此插件：http://jrvis.com/trunk8/

使用：

$('.morerates').trunk8({
  lines: 1
});

Answer 2

只需使用css类设置div的高度并溢出到隐藏。只要单击show more按钮，就从文本容器中删除此类。

.less {
    overflow: hidden;
    height: 1em;
}

这是工作小提琴：http://jsfiddle.net/2tg7v/

Answer 3

这应该不难实现。你可以做点什么

$(document).ready(function(){    
    // when more button is clicked
    $('#more').click(function(){
        text = $(this).attr("data-text");
        $('#more-text').toggle(function(){
            if(text == "more"){
                $('#more').text("Less");
                $('#more').attr("data-text","less");
            } else {
                $('#more').text("More");
                $('#more').attr("data-text","more");
            }

        });
    });
});

请参阅jsfiddle http://jsfiddle.net/8jFGc/

Answer 4

这是工作代码。确保你先调用Jquery Script。

<script src="jquery.js"></script>
<style>
    ul{list-style:none;}
    p{border:1px solid;}
</style>
<script>
    $(document).ready(function(){

        $("#tab > p").hide();

        $("#tab h1").click(function(){
            $("#tab >p ").slideUp(0);
            //$(this).siblings("p").slideDown();            
            $(this).parent().children("p").slideDown(0);
        });

    });
</script>

<style>

    p{
        width:35%;
    }
</style>
    <div id="tab">
        <h1> Hello </h1>
        <p> Hello PAra Hello PAraHello PAraHello PAraHello </p>
    </div>
    <div id="tab">
        <h1> Hello 1</h1>
        <p> Hello PAra Hello PAraHello PAraHello PAraHello </p>
    </div>

显示“显示更多”按钮并隐藏第二行

4 个答案: