我下面的代码中有一个tab，它由多维数组中的数据组成，问题是我正在尝试创建一个read more button，它会显示特定数量的单词，当我单击时read more button将会显示本段的其余部分，是否有任何简单的方法可以使用javascript和jquery做到这一点，将不胜感激。
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
var personArr = [];
var person = {["first-Name"]:"John", ["last-Name"]:"Doe", ["age"]:21, ["person-desc"]:"Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket.Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket."};
var person2 = {["first-Name"]:"Paul", ["last-Name"]:"Logan", ["age"]:22, ["person-desc"]:"Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket.Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket."};
var person3 = {["first-Name"]:"Sean", ["last-Name"]:"Kim", ["age"]:32, ["person-desc"]:"Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket.Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket."};
var person4 = {["first-Name"]:"Ken", ["last-Name"]:"Chow", ["age"]:12, ["person-desc"]:"Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket.Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. Jerky pork loin ham, pork turducken ham hock meatball picanha doner capicola. Landjaeger shank tongue, tri-tip jerky pork chop cupim sausage. Tongue bresaola pastrami turkey shankle chicken pork loin biltong ham hock tenderloin shank brisket."};
personArr.push(person, person2, person3, person4);
console.log(personArr);
var parent = document.getElementsByClassName('line1')[0];
var frag = document.createDocumentFragment();
// Iterate through the Person Array
personArr.forEach((person,i) => {
// `person` is the ith member of personArr
var name = document.createElement('h4');
var desc = document.createElement('p');
// Update the contents of your h3 element and add it to the fragment.
name.textContent = ` ${person['first-Name']} ${person['last-Name']}`;
desc.textContent = ` ${person['person-desc']}`;
frag.appendChild(name);
frag.appendChild(desc);
});
// Add the fragment to the parent :)
parent.appendChild(frag);body {font-family: Arial;}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.line1{
display:inline-block;
}
.size{
width:70%;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class ="size">
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'People')" id="defaultOpen">People</button>
</div>
<div id="People" class="tabcontent">
<div class="line1">
</div>
</div>
</div>
</body>
</html>