Question

我正试图在我的网站上创建许多“显示更多/更少”，我被困的部分是我的简历。它包含一个表，我想在页面加载时隐藏一些行。我已设法做到这一点，但显示更多链接只适用于双击不单，我只是无法弄清楚为什么以及如何解决它！

以下是我的jQuery代码：

jQuery(document).ready(function(){

    //About Section:
    jQuery("#about-showMore").click(function(){
        var about= document.getElementById("about-more");
        var showAbout= document.getElementById("about-showMore");

        if(about.style.display == 'none'){
            $("#about-more").show();
            showAbout.innerHTML = "(Show Less)";
        }
        else{
            $("#about-more").hide();
            showAbout.innerHTML = "(Show More)";
        }
    });


    //Resume Section:
    jQuery("#resume-showMore").click(function(){
        var resumeTitle= document.getElementsByClassName("table_title");
        var showResume= document.getElementById("resume-showMore");

        if(resumeTitle[0].style.display == 'none'){

            jQuery(".table_title").show();
            jQuery(".table_Des").show();    
        }
        else{
                jQuery(".table_title").hide();
                jQuery(".table_Des").hide();
                showResume.innerHTML = "(Show More)";
        }
    });
});

在我的HTML中，我为那些我想要隐藏的行添加了同名类'table_title'和'table_Des'。

在CSS中我放了'display：none;'对于这两个类：

tr.table_title{
    color: gray;
    font-size: 13px;
    font-weight: 50%;
    display: none;
}

tr.table_Des{
    color:gray;
    font-size: 13px;
    font-weight: lighter;
    display: none;
}

Answer 1

试试这个。您可以在简历部分使用相同的代码，只需更改ID和/或类名称。

$("#about-showMore").click(function(e){
    e.preventDefault();
    $('#about-more').toggle();
    
    if($('#about-more').is(':visible')) {
        $(this).html('Show Less');
    } else {
        $(this).html('Show More');
    }
});

#about-more {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="about-showMore">Show More</a>
<div id="about-more">More Stuff</div>

Answer 2

您使用css检查隐藏状态并使用jquery hide函数显示它。我认为最好的方法是使用唯一的jquery hide / show或css display：block / none等。

一个例子如下：

//Resume Section:
jQuery("#resume-showMore").click(function(){
    var resumeTitle= document.getElementsByClassName("table_title");
    var showResume= document.getElementById("resume-showMore");
    if(resumeTitle[0].style.display == 'none'){
        jQuery(".table_title").css('display','block');
        jQuery(".table_Des").css('display','block');  
    }
    else{
            jQuery(".table_title").css('display','none');
            jQuery(".table_Des").css('display','none');
            $("#resume-showMore").html("Show More");
    }
});

只需单击双击，jQuery单击即可生效

2 个答案: