我正在尝试创建一个“多读多读”按钮。我隐藏的内容在span标签中。我使用了一些JavaScript来完成这项工作。当前，当我单击按钮时，什么也没有发生。我的目标是创建一个新闻部分，当您单击按钮时显示更多新闻。
这之前对我有用，我使用了完全相同的代码，然后将其与其他代码合并，但它停止了工作。
$(document).ready(function () {
var windowHeight = window.innerHeight;
var navOpen = false;
var onCloseBtn = false;
var onAccordian = false;
$("#hamburger").mouseover(function(){
if(!navOpen){
openMenu();
}
onCloseBtn = true;
});
$("#hamburger").mouseout(function(){
onCloseBtn = false;
});
$("#hamburger").click(function(){
toggleNav();
console.log("clickedHam");
});
$("#navMenu").mouseover(function(){
if(!navOpen && !onCloseBtn){
keepOpen();
}
});
$("#activeSpace").mouseleave(function(){
console.log("navMenu Mouseout");
closeMenu();
});
function toggleNav(){
if(navOpen){
closeMenu();
} else {
openMenu();
}
}
function keepOpen(){
console.log("keepOpen");
navOpen = true;
$('#hamburger').html('×');
$('#hamburger').css("color","black");
$("#navMenu").css("visibility","visible");
$("#navMenu").css("height","auto");
$("#navMenu").css("max-height", windowHeight);
}
function openMenu(){
console.log("open");
navOpen = true;
$('#hamburger').html('×');
$('#hamburger').css("color","black");
$("#navMenu").css("visibility","visible");
$("#navMenu").css("max-height", "250px"); ///change this depending on the max
}
function closeMenu(){
closePanels();
navOpen = false;
console.log("close")
$('#hamburger').html('☰');
$('#hamburger').css("color","white");
$("#navMenu").css("max-height", "0");
$("#navMenu").css("visibility","hidden");
}
$(document).on('scroll', function() {
if($(this).scrollTop()>=$('#changeNavColor').position().top - 40 && !navOpen){
$(hamburger).css("color","black");
}
if($(this).scrollTop()<$('#changeNavColor').position().top - 40 && !navOpen){
$(hamburger).css("color","white");
}
});
var acc = document.getElementsByClassName("mobile-accordian");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
//this.classList.toggle("active");
$("#navMenu").css("height","auto");
$("#navMenu").css("max-height", windowHeight);
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
function closePanels() {
var panels = document.getElementsByClassName("mobile-accordian-panel");
var j;
for (j = 0; j < panels.length; j++){
panels[j].style.maxHeight = null;
}
}
function toggleNewsButton() {
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (!moreText.style.display || moreText.style.display === "none") {
btnText.innerHTML = "Read less";
moreText.style.display = "block";
} else {
btnText.innerHTML = "Read more";
moreText.style.display = "none";
}
}
}); html, body{
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
}
h1{
font-size: 3em;
}
h2{
font-size: 1.5em;
}
h3{
font-size: 0.75em;
font-weight:400;
text-transform: uppercase;
}
.FullsizeImg{
background-repeat: no-repeat;
background-size: 30%;
background-position: right;
}
#more {
display: none;
}
#myBtn {
color: black;
background: #fff;
border: 1px solid black;
font-size: 17px;
padding: 7px 12px;
font-weight: normal;
margin: 6px 0;
margin-right: 12px;
}
.centerButton {
text-align: center;
}
#myBtn:hover,
#myBtn:active {
background: black;
color: white;
}
.allStories{
margin-left:20px;
margin-right:20px;
}
#hamburger{
z-index: 11;
display: block;
visibility: visible;
position: fixed;
top: 10px;
left: 10px;
color: white;
transition: all 0.25 ease;
}
#closeBtn{
display:block;
position:fixed;
top:10px;
left:10px;
}
#navMenu{
z-index: 10;
display: block;
overflow:hidden;
position: fixed;
top: 0;
left: 0;
color: black;
background-color: white;
box-shadow: 0 0 8px rgba(33,33,33,.6);
max-height: 0;
width: 100%;
-webkit-transition: 1s ease;
-moz-transition: 1s ease;
-o-transition: 1s ease;
-ms-transition: 1s ease;
transition: 1s ease;
visibility: hidden;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav ul li {
color: grey;
font-size: 14px;
font-weight: regular;
font-family: inherit;
padding: 5px 0px 5px 0px;
cursor: pointer;
transition: .5s ease;
-webkit-transition: .5s ease;
-moz-transition: .5s ease;
}
.nav li:hover {
color: lightgrey;
font-weight: bold;
transition: .5s ease;
-webkit-transition: .5s ease;
-moz-transition: .5s ease;
}
.mainMargins{
margin-left: 10%;
margin-right: 10%;
}
.smallSpacer{
height: 25px;
}
.bigSpacer{
height: 100px;
}
.txtAlignRight{
}
.AlwaysFullScreen{
width: 100%;
height: 100%;
}
.fullScreen{
width: 100%;
height: 100%;
}
.withBGImg{
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.jumbo-title{
font-weight: bold;
letter-spacing: 0.02em;
}
.jumbo-caption{
font-weight: 300;
font-size:
}
.jumbo-container{
color: white;
}
.verticalCentreParent{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.verticalCentreChild{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.content-verticalCentreParent{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.content-verticalCentreChild{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.iconContainer{
text-align: center;
}
.mediumIcons{
height: 100px;
}
.scrollCard{
box-shadow: 0 0 8px rgba(33,33,33,.2);
width: 200px;
height: 250px;
border-radius: 10px;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.scrollCard:hover{
box-shadow: 0 0 11px rgba(33,33,33,.5);
}
.scrollCardBar {
display: flex;
min-width: 100%;
min-height: 200px;
overflow-x: auto;
margin: 0;
}
.scrollCard {
min-width: 300px;
margin: 8px;
}
.scrollCardContainer{
display: flex;
margin-left: 10%;
margin-right: 10%;
}
.scrollCardBar::-webkit-scrollbar {
display: none;
}
.endOfScroll{
width: 100px;
}
.line{
margin-top: 10px;
margin-bottom: 35px;
background-color: white;
height: 1px;
}
footer{
height: auto;
background-color: #5388EF;
color: white;
width: 100%;
position: relative;
}
footer ul{
font-weight: 300;
list-style-type: none;
margin-top: 20px;
padding: 0;
}
footer li{
padding: 10px 0px 5px 0px;
}
footer .row{
margin: auto;
}
footer .footer-column{
width: calc(100% / 6);
height: auto;
float: left;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0px 20px 20px 20px;
margin-top: 20px;
}
@media only screen and (min-width: 2000px){
.mainMargins{
margin-left: 25%;
margin-right: 25%;
}
.scrollCardContainer{
margin-left: 25%;
margin-right: 25%;
}
}
@media only screen and (max-height: 1000px){
.fullScreen{
height: auto;
width: auto;
}
.content-verticalCentreChild{
position: relative;
top: 100%;
transform: none;
}
}
@media only screen and (max-width: 1400px) {
footer .footer-column{
width: calc(100% / 3);
}
}
@media only screen and (max-width: 600px) {
h1{
font-size: 2em;
}
h2{
font-size: 1em;
}
#hamburger{
top: 5px;
left: px;
}
.mobile-accordian-panel{
max-height: 0;
overflow: hidden;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.mainMargins{
margin-left: 8%;
margin-right: 8%;
}
.content-verticalCentreChild{
position: relative;
top: 100%;
transform: none;
}
.scrollCardContainer{
margin-left: 8%;
margin-right: 8%;
}
.endOfScroll{
width: 16px;
}
footer .footer-column{
width: 100%
}
}<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="/javascript/main.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap" rel="stylesheet">
</head>
<body>
<div class = "nav">
<span id="hamburger" style="font-size:30px;cursor:pointer">☰ </span>
<div id = "activeSpace">
<div id = "navMenu">
<div class = "row mainMargins" style="margin-top:20px;">
<div class = "col-sm-3">
<div class = "mobile-accordian">
<h3>Title</h3>
</div>
<div class = "mobile-accordian-panel">
<ul class = "menu-subItems">
<li>About</li>
<li>Mission</li>
<li>Services</li>
<li>Social</li>
<li>Get in touch</li>
</ul>
</div>
</div>
<div class = "col-sm-3">
<div class = "mobile-accordian">
<h3>Title</h3>
</div>
<div class = "mobile-accordian-panel">
<ul class = "menu-subItems">
<li>About</li>
<li>Mission</li>
</ul>
</div></div>
<div class = "col-sm-3"><div class = "mobile-accordian">
<h3>Title</h3>
</div>
<div class = "mobile-accordian-panel">
<ul class = "menu-subItems">
<li>About</li>
<li>Mission</li>
<li>Services</li>
<li>Social</li>
</ul>
</div></div>
<div class = "col-sm-3"><div class = "mobile-accordian">
<h3>Title</h3>
</div>
<div class = "mobile-accordian-panel">
<ul class = "menu-subItems">
<li>About</li>
<li>Mission</li>
<li>Services</li>
</ul>
</div>
</div>
</div>
<div class = "smallSpacer"></div>
</div>
</div>
</div>
<section id = "landing" class = "AlwaysFullScreen">
<div class = "AlwaysFullScreen withBGImg verticalCentreParent" style = "background-image: url(/images/placeHolder.jpg)">
<div class = "jumbo-container verticalCentreChild mainMargins">
<img class = "logo" src = "/images/logo.png">
<div class = "smallSpacer"></div>
<h1 class = "jumbo-title">Catchy Headline That Spans Multiple Lines</h1>
<h2 class = "jumbo-caption">Headline Caption (Optional)</h2>
</div>
</div>
</section>
<div id="changeNavColor"></div>
<section id = "#" class="fullScreen">
<div class = "fullScreen content-verticalCentreParent">
<div class = "mainMargins content-verticalCentreChild">
<div class = "row">
<div class = "iconContainer col-sm-4 content-verticalCentreParent" style="">
<img class = "mediumIcons verticalCentreChild" src = "/images/placeHolder.jpg" >
</div>
<div class = "col-sm-8">
<h1>Title</h1>
<p>This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). </p>
</div>
</div>
<div class = "bigSpacer"></div>
<div class = "row">
<div class = "col-sm-8 text-right">
<h1>Title</h1>
<p>This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking).</p>
</div>
<div class = "iconContainer col-sm-4 verticalCentreParent">
<img class = "mediumIcons verticalCentreChild" src = "/images/placeHolder.jpg">
</div>
</div>
<div class = "bigSpacer"></div>
<div class = "row">
<div class = "iconContainer col-sm-4 verticalCentreParent" style="">
<img class = "mediumIcons verticalCentreChild" src = "/images/placeHolder.jpg" >
</div>
<div class = "col-sm-8">
<h1>Title</h1>
<p>This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). </p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id = "#" class="fullScreen">
<div class = "fullScreen content-verticalCentreParent">
<div class = "content-verticalCentreChild">
<div class = "mainMargins">
<h1>Title</h1>
<p>This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking).</p>
</div>
<div class = "bigSpacer"></div>
<div class="scrollCardBar">
<div class = "scrollCardContainer">
<div class="scrollCard"></div>
<div class="scrollCard"></div>
<div class="scrollCard"></div>
<div class="scrollCard"></div>
<div class="scrollCard"></div>
<div class="scrollCard"></div>
<div class="scrollCard"></div>
<div class="scrollCard"></div>
<div class="scrollCard"></div>
<div class="scrollCard"></div>
<div class = "endOfScroll"></div>
</div>
</div>
</div>
</section>
<section id="#" class="fullScreen">
<div class = "fullScreen content-verticalCentreParent FullsizeImg" style ="background-image: url(/images/brain.svg)">
<div class = "content-verticalCentreChild">
<div class = "mainMargins">
<h1>Title</h1>
<p>This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). </p>
</div>
</div>
</div>
</section>
<section id="#" class="">
<div class = "mainMargins">
<h1 id ="#" style = "text-align:center;" > Meet Our Reseachers</h1>
<h3>This is paragraph text. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). </h3>
<div class ="row">
<div class = "col-sm-4" style ="text-align: center;">
<img class="imagePeople" src = "/images/person1.jpg" style = "height: 300px;">
<div class="spacer"></div>
<small>A groundbreaking blueprint for store-program computers. Though a complete version of the ACE was never built, its concept has been used as a model by tech corporations worldwide for several years</small>
</div>
<div class = "col-sm-4" style ="text-align: center;">
<img class="imagePeople" src = "/images/person2.jpg" style = "height: 300px;">
<div class="spacer"></div>
<small>He first addressed the issue of artificial intelligence in his 1950 paper, "Computing machinery and intelligence". If an AI can convice a human that is it human, it should be considered intelligent.</small>
</div>
<div class = "col-sm-4" style ="text-align: center;">
<img class="imagePeople" src = "/images/person3.jpg" style = "height: 300px;">
<div class="spacer"></div>
<small>The highest acheivable award in the field of computer science. Named after Alan Turing for his grand contributions and is equivalent to the Noble Prize.</small><div class="bigSpacer"></div><div class="bigSpacer"></div>
</div>
</div>
</div>
<div class="bigSpacer"></div>
</section>
<section id="#" class="">
<div class = "mainMargins">
<h1 id ="#" style = "text-align:center;" > News</h1>
<h3 id ="#" style = "text-align:center;" > Read the Storie’s of sTTARR’s reseachers and users. </h3>
<div class="smallSpacer"></div>
<div class ="row">
<div class = "col-sm-4" style ="text-align: center;">
<p class="#" style = "color:lightgray; ">Jan, 01, 2019 </p>
<img src = "/images/news1.jpg" style = "height:200px; width:300px;">
<div class="smallSpacer"></div>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class = "col-sm-4" style ="text-align: center;">
<p class="#" style = "color:lightgray; ">Jan, 01, 2019 </p>
<img src = "/images/news2.jpg" style = "height:200px; width:300px;">
<div class="smallSpacer"></div>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class = "col-sm-4" style ="text-align: center;">
<p class="#" style = "color:lightgray; ">Jan, 01, 2019 </p>
<img src = "/images/news3.jpg" style = "height:200px; width:300px;">
<div class="smallSpacer"></div>
<small>Title of the news article will be diplayed under the photo. </small>
<div class="smallSpacer"></div>
</div>
</div>
<div class="allStories">
<hr>
<h2 style = "text-align:center;" > All Stories</h2>
<hr>
<div class="smallSpacer"></div>
<div class="row">
<div class ="col-sm-6" style = "text-align:left;">
<p class="#" style = "color:lightgray;">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class ="col-sm-6" style = "text-align: right;">
<img src = "/images/news1.jpg" style = "height:200px; width:300px;">
</div>
</div>
<hr>
<div class="row">
<div class ="col-sm-6" style = "text-align:left;">
<p class="#" style = "color:lightgray; ">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class ="col-sm-6" style = "text-align: right;">
<img src = "/images/news2.jpg" style = "height:200px; width:300px; ">
</div>
</div>
<hr>
<div class="row">
<div class ="col-sm-6" style = "text-align:left;">
<p class="#" style = "color:lightgray; ">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class ="col-sm-6" style = "text-align: right;">
<img src = "/images/news3.jpg" style = "height:200px; width:300px; ">
</div>
</div>
<hr>
<span id="more">
<div class="row">
<div class ="col-sm-6" style = "text-align:left;">
<p class="#" style = "color:lightgray;">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class ="col-sm-6" style = "text-align: right;">
<img src = "/images/news1.jpg" style = "height:200px; width:300px;">
</div>
</div>
<hr>
<div class="row">
<div class ="col-sm-6" style = "text-align:left;">
<p class="#" style = "color:lightgray; ">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class ="col-sm-6" style = "text-align: right;">
<img src = "/images/news2.jpg" style = "height:200px; width:300px; ">
</div>
</div>
<hr>
<div class="row">
<div class ="col-sm-6" style = "text-align:left;">
<p class="#" style = "color:lightgray; ">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class ="col-sm-6" style = "text-align: right;">
<img src = "/images/news3.jpg" style = "height:200px; width:300px; ">
</div>
</div>
</span>
</div>
<div class="centerButton">
<button onclick="toggleNewsButton()" id="myBtn">Read more</button>
</div>
</section>
<div class="bigSpacer"></div><div class="bigSpacer"></div><div class="bigSpacer"></div></div><div class="bigSpacer"></div></div><div class="bigSpacer"></div>
<section id = "#" class="">
<div class = " content-verticalCentreParent">
<div class = "content-verticalCentreChild">
<div class = "mainMargins">
<div class ="row">
<div class = "col-sm-4" style ="text-align: left;">
<h2> Updates </h2>
<div class="smallSpacer"></div>
<p> Here is a live twitter update.Here is a live twitter update.Here is a live twitter update.Here is a live twitter update. </p>
</div>
<div class = "col-sm-8" style ="text-align: center;">
<a class="twitter-timeline" data-width="400" data-height="700" href="https://twitter.com/UHN?ref_src=twsrc%5Etfw">Tweets from UHN</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class = "bigSpacer"></div>
</div>
</div>
</section>
<div class = "bigSpacer"></div>
<footer>
<div class = "mainMargins">
<div class = "smallSpacer"></div>
<div class = "line"></div>
<div class = "row">
<div class = "footer-column">
<img src="/images/logo.png" style = "height: 40px">
</div>
<div class = "footer-column">
<h3>Title</h3>
<ul class = "">
<li>About</li>
<li>Mission</li>
<li>Services</li>
<li>Social</li>
<li>Get in touch</li>
</ul>
</div>
<div class = "footer-column">
<h3>Title</h3>
<ul class = "">
<li>About</li>
<li>Mission</li>
<li>Services</li>
<li>Social</li>
<li>Get in touch</li>
</ul>
</div>
<div class = "footer-column">
<h3>Title</h3>
<ul class = "">
<li>About</li>
<li>Mission</li>
<li>Services</li>
<li>Social</li>
<li>Get in touch</li>
</ul>
</div>
<div class = "footer-column">
<h3>Title</h3>
<ul class = "">
<li>About</li>
<li>Mission</li>
<li>Services</li>
<li>Social</li>
<li>Get in touch</li>
</ul>
</div>
<div class = "footer-column">
<h3>Title</h3>
<ul class = "">
<li>About</li>
<li>Mission</li>
<li>Services</li>
<li>Social</li>
<li>Get in touch</li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
EXPECTED：按钮应在read more标签中显示信息。
实际：按钮在您单击时没有任何作用。
答案 0 :(得分：0)
将<button onclick="myFunction()" id="myBtn">Read more</button>替换为<button onclick="toggleNewsButton()" id="myBtn">Read more</button>
您确实输入了错误的功能
function toggleNewsButton() {
var readmore = document.getElementById("readmore");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (readmore.style.display === "none") {
readmore.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
readmore.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}#more {display: none;}
#myBtn{
color:black;
background:#fff;
border: 1px solid black;
font-size: 17px;
padding: 7px 12px;
font-weight: normal;
margin: 6px 0;
margin-right: 12px;
}
.centerButton{
text-align: center;
}
#myBtn:hover, #myBtn:active {
background:black;
color:white;
}<section id="#" class="">
<div class="allStories">
<hr>
<h2 style = "text-align:center;" > All Stories</h2>
<hr>
<div class="smallSpacer"></div>
<div class="row">
<div class ="col-sm-6" style = "text-align:left;">
<p class="#" style = "color:lightgray;">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class ="col-sm-6" style = "text-align: right;">
<img src = "/images/news1.jpg" style = "height:200px; width:300px;">
</div>
</div>
<hr>
<div class="row">
<div class ="col-sm-6" style = "text-align:left;">
<p class="#" style = "color:lightgray; ">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class ="col-sm-6" style = "text-align: right;">
<img src = "/images/news2.jpg" style = "height:200px; width:300px; ">
</div>
</div>
<hr>
<div class="row">
<div class ="col-sm-6" style = "text-align:left;">
<p class="#" style = "color:lightgray; ">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class ="col-sm-6" style = "text-align: right;">
<img src = "/images/news3.jpg" style = "height:200px; width:300px; ">
</div>
</div>
<hr>
<span id="readmore"></span>
<span id="more">
<div class="row">
<div class ="col-sm-6" style = "text-align:left;">
<p class="#" style = "color:lightgray;">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class ="col-sm-6" style = "text-align: right;">
<img src = "/images/news1.jpg" style = "height:200px; width:300px;">
</div>
</div>
<hr>
<div class="row">
<div class ="col-sm-6" style = "text-align:left;">
<p class="#" style = "color:lightgray; ">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class ="col-sm-6" style = "text-align: right;">
<img src = "/images/news2.jpg" style = "height:200px; width:300px; ">
</div>
</div>
<hr>
<div class="row">
<div class ="col-sm-6" style = "text-align:left;">
<p class="#" style = "color:lightgray; ">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class ="col-sm-6" style = "text-align: right;">
<img src = "/images/news3.jpg" style = "height:200px; width:300px; ">
</div>
</div>
</span>
</div>
</div>
<div class="centerButton">
<button onclick="toggleNewsButton()" id="myBtn">Read more</button>
</div>
</section>
答案 1 :(得分：0)
这应该做到。这还需要更改：
if (readmore.style.display === "none") {
到
if (moreText.style.display === "none") {
function toggleNewsButton() {
var readmore = document.getElementById("readmore");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (moreText.style.display === "none") {
readmore.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
readmore.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}#more {
display: none;
}
#myBtn {
color: black;
background: #fff;
border: 1px solid black;
font-size: 17px;
padding: 7px 12px;
font-weight: normal;
margin: 6px 0;
margin-right: 12px;
}
.centerButton {
text-align: center;
}
#myBtn:hover,
#myBtn:active {
background: black;
color: white;
}<section id="#" class="">
<div class="allStories">
<hr>
<h2 style="text-align:center;"> All Stories</h2>
<hr>
<div class="smallSpacer"></div>
<div class="row">
<div class="col-sm-6" style="text-align:left;">
<p class="#" style="color:lightgray;">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class="col-sm-6" style="text-align: right;">
<img src="/images/news1.jpg" style="height:200px; width:300px;">
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-6" style="text-align:left;">
<p class="#" style="color:lightgray; ">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class="col-sm-6" style="text-align: right;">
<img src="/images/news2.jpg" style="height:200px; width:300px; ">
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-6" style="text-align:left;">
<p class="#" style="color:lightgray; ">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class="col-sm-6" style="text-align: right;">
<img src="/images/news3.jpg" style="height:200px; width:300px; ">
</div>
</div>
<hr>
<span id="readmore"></span>
<div id="more">
<div class="row">
<div class="col-sm-6" style="text-align:left;">
<p class="#" style="color:lightgray;">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class="col-sm-6" style="text-align: right;">
<img src="/images/news1.jpg" style="height:200px; width:300px;">
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-6" style="text-align:left;">
<p class="#" style="color:lightgray; ">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class="col-sm-6" style="text-align: right;">
<img src="/images/news2.jpg" style="height:200px; width:300px; ">
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-6" style="text-align:left;">
<p class="#" style="color:lightgray; ">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class="col-sm-6" style="text-align: right;">
<img src="/images/news3.jpg" style="height:200px; width:300px; ">
</div>
</div>
</div>
</div>
</div>
<div class="centerButton">
<button onclick="toggleNewsButton()" id="myBtn">Read more</button>
</div>
</section>
答案 2 :(得分：0)
我不确定您需要什么#readmore，毕竟它是空的span。无论如何，我摆脱了这个。另外，当您在CSS中设置display: none时，style.display将是一个空字符串，仅适用于内联样式（请参见操作here。
只需遵循我所做的更改即可。
function toggleNewsButton() {
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (!moreText.style.display || moreText.style.display === "none") {
btnText.innerHTML = "Read less";
moreText.style.display = "block";
} else {
btnText.innerHTML = "Read more";
moreText.style.display = "none";
}
}#more {
display: none;
}
#myBtn {
color: black;
background: #fff;
border: 1px solid black;
font-size: 17px;
padding: 7px 12px;
font-weight: normal;
margin: 6px 0;
margin-right: 12px;
}
.centerButton {
text-align: center;
}
#myBtn:hover,
#myBtn:active {
background: black;
color: white;
}<section id="" class="">
<div class="allStories">
<hr>
<h2 style="text-align:center;"> All Stories</h2>
<hr>
<div class="smallSpacer"></div>
<div class="row">
<div class="col-sm-6" style="text-align:left;">
<p class="#" style="color:lightgray;">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class="col-sm-6" style="text-align: right;">
<img src="/images/news1.jpg" style="height:200px; width:300px;">
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-6" style="text-align:left;">
<p class="#" style="color:lightgray; ">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class="col-sm-6" style="text-align: right;">
<img src="/images/news2.jpg" style="height:200px; width:300px; ">
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-6" style="text-align:left;">
<p class="#" style="color:lightgray; ">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class="col-sm-6" style="text-align: right;">
<img src="/images/news3.jpg" style="height:200px; width:300px; ">
</div>
</div>
<hr>
<span id="more">
<div class="row">
<div class ="col-sm-6" style = "text-align:left;">
<p class="#" style = "color:lightgray;">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class ="col-sm-6" style = "text-align: right;">
<img src = "/images/news1.jpg" style = "height:200px; width:300px;">
</div>
</div>
<hr>
<div class="row">
<div class ="col-sm-6" style = "text-align:left;">
<p class="#" style = "color:lightgray; ">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class ="col-sm-6" style = "text-align: right;">
<img src = "/images/news2.jpg" style = "height:200px; width:300px; ">
</div>
</div>
<hr>
<div class="row">
<div class ="col-sm-6" style = "text-align:left;">
<p class="#" style = "color:lightgray; ">Jan, 01, 2019 </p>
<small>Title of the news article will be diplayed under the photo. </small>
</div>
<div class ="col-sm-6" style = "text-align: right;">
<img src = "/images/news3.jpg" style = "height:200px; width:300px; ">
</div>
</div>
</span>
</div>
<div class="centerButton">
<button onclick="toggleNewsButton()" id="myBtn">Read more</button>
</div>
</section>