段落展开收起功能

Html

Css

#qq a {
	cursor:pointer;
	color:red;
}

var data = ["11111111111111111111", "222222222222222222222", "3333333333333333333333333", "4444444444444444444444444444"];

$(function() {
    var htmlContent = "";
    for (var element in data) {
        console.log("element:" + element);
        var dataStrLong = data[element];
        //console.log("dataStrLong:"+dataStrLong);
        if (dataStrLong.length > 3) {
            var dataStrShort = dataStrLong.substr(0, 3);
            htmlContent += "<div id=\"" + element + "a" + "\">" + dataStrShort + "<a onclick=" + "\"clickTmp(" + element + "," + "1" + ")\"" + ">展开</a>" + "</div>";
            htmlContent += "<div id=\"" + element + "b" + "\" style='display:none'>" + dataStrLong + "<a onclick=" + "\"clickTmp(" + element + "," + "2" + ")\"" + ">收起</a>" + "</div>";
        }
    }
    console.log("htmlContent:" + htmlContent);
    document.getElementById("qq").innerHTML = htmlContent;
});

function clickTmp(element, flag) {
    var idTmpa = element + "a";
    var idTmpb = element + "b";

if (flag == 1) {
        console.log(idTmpa);
        $("#" + idTmpa).hide();
        $("#" + idTmpb).show();
    } else {
        $("#" + idTmpa).show();
        $("#" + idTmpb).hide();
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

段落展开收起功能



代码描述：在写项目中遇到段落展开收起功能，写个小demo大家可以提提意见

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

Lavender

相关代码

段落展开收起功能

最新