我在下面的代码中有一个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>
最佳答案
下面是readmore js并尝试使用它。
https://github.com/jedfoster/Readmore.js