如果单击现在看不到的图像,则会显示另一个div,其中包含一些信息,在该div内,您也将看不到另一张图像,单击该图像会显示更多信息。
并且有一个按钮,显示所有/隐藏所有信息。
我想要实现的是,当任何弹出文本(通过单击图片出现)都已经可见,然后单击Show all
按钮时,它保持原样,只有不可见的文本才会出现。出现。
function popupD1() {
var popup = document.getElementById("myPopupD1");
popup.classList.toggle("show");
var image = document.getElementById("arrow1");
if (image.getAttribute('src') == "arrow.png") {
image.src = "arrowL.png";
} else {
image.src = "arrow.png";
}
var D1S=document.getElementById("D1S");
if(D1S.textContent=="Show info"){
D1S.textContent="Hide info";
} else {
D1S.textContent="Show info";
}
}
function D1moreinfo() {
var hide=document.getElementById("D1moreinfo");
if(hide.style.display ==="block") {
hide.style.display="none";
} else{
hide.style.display="block";
}
var image = document.getElementById("arrowL1");
if (image.getAttribute('src') == "arrowL.png") {
image.src = "arrow.png";
} else {
image.src = "arrowL.png";
}
}
function popupD2() {
var popup = document.getElementById("myPopupD2");
popup.classList.toggle("show");
var image = document.getElementById("arrow1");
if (image.getAttribute('src') == "arrow.png") {
image.src = "arrowL.png";
} else {
image.src = "arrow.png";
}
var D1S=document.getElementById("D2S");
if(D1S.textContent=="Show info") {
D1S.textContent="Hide info";
} else {
D1S.textContent="Show info";
}
}
function D2moreinfo() {
var hide=document.getElementById("D2moreinfo");
if(hide.style.display ==="block") {
hide.style.display="none";
} else{
hide.style.display="block";
}
var image = document.getElementById("arrowL1");
if (image.getAttribute('src') == "arrowL.png") {
image.src = "arrow.png";
} else {
image.src = "arrowL.png";
}
}
function showall(){
var D1 = document.getElementById("myPopupD1");
var D2 = document.getElementById("myPopupD2");
var D1M = document.getElementById("D1moreinfo");
var D2M = document.getElementById("D2moreinfo");
D1.classList.toggle("show");
D2.classList.toggle("show");
if(D1M.style.display ==="block") {
D1M.style.display="none";
} else{
D1M.style.display="block";
}
if(D2M.style.display ==="block") {
D2M.style.display="none";
} else{
D2M.style.display="block";
}
var D1S=document.getElementById("show");
if(D1S.textContent=="Show all"){
D1S.textContent="Hide all";
} else {
D1S.textContent="Show all";
}
}
.D1 {
border:1px solid;
border-color:red;
width:450px;
height:220px;
margin-top:10px;
}
#D1button {
border:none;
overflow:hidden;
background-color:transparent;
display:block;
position:absolute;
left:390px;
top:175px;
color:red;
}
.popupD1 {
position: relative;
display: inline-block;
cursor: pointer;
}
.popupD1 .popuptextD1 {
visibility: hidden;
width: 250px;
height:210px;
color: red;
text-align: center;
border-radius: 6px;
padding: 8px 0;
left:370px;
position: absolute;
z-index: 0;
top: 20px;
background-color: gray;
margin-left: 100px;
}
.popupD1 .popuptextD1:hover {
transition:1.5s;
background-image:url(BF4B9.jpg);
color:red;
}
.popupD1 .show {
visibility: visible;
-webkit-animation: fadeIn;
animation: fadeIn 1s;
}
#D1moreinfo {
background-color: transparent;
border-radius: 6px;
width:200px;
height:relative;
display:none;
position:absolute;
top:-5px;
left:255px;
}
.D2 {
border:1px solid;
border-color:red;
width:450px;
height:220px;
margin-top:10px;
}
#D2button {
border:none;
overflow:hidden;
background-color:transparent;
display:block;
position:absolute;
left:390px;
top:290px;
color:red;
}
.popupD2 {
position: relative;
display: inline-block;
cursor: pointer;
}
.popupD2 .popuptextD2 {
visibility: hidden;
width: 250px;
height:210px;
color: red;
text-align: center;
border-radius: 6px;
padding: 8px 0;
left:370px;
position: absolute;
z-index: 0;
top: 20px;
background-color: gray;
margin-left: 100px;
}
.popupD2 .popuptextD2:hover {
transition:1.5s;
background-image:url(BF4B9.jpg);
color:red;
}
.popupD2 .show {
visibility: visible;
-webkit-animation: fadeIn;
animation: fadeIn 1s;
}
#D2moreinfo {
background-color: transparent;
border-radius: 6px;
width:200px;
height:relative;
display:none;
position:absolute;
top:-5px;
left:255px;
}
.showall {
overflow:hidden;
background-color:transparent;
position:absolute;
top:-4px;
left:335px;
position:fixed;
border-radius:10px;
}
<div class="D1">
<div class="popupD1">
<span class="popuptextD1" id="myPopupD1">
*A long text that I'm not gonna paste here*<br>
<button id="morebutton1" onclick="D1moreinfo()"><img id="arrowL1" src="arrow.png"/></button>
<div id="D1moreinfo">
<ul>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
</ul>
</div>
</span>
</div>
<img id="D1K" src="XY.png"/>
<button id="D1button" onclick="popupD1()"><img id="arrow1" src="arrow.png"/><br><span id="D1S">Show info</span></button>
</div>
<div class="D2">
<div class="popupD2">
<span class="popuptextD2" id="myPopupD2">
*A long text that I'm not gonna paste here*<br>
<button id="morebutton1" onclick="D2moreinfo()"><img id="arrowL1" src="arrow.png"/></button>
<div id="D2moreinfo">
<ul>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
</ul>
</div>
</span>
</div>
<img id="D2K" src="XY.png"/>
<button id="D2button" onclick="popupD2()"><img id="arrow1" src="arrow.png"/><br><span id="D2S">Show info</span></button>
</div>
<div class="showall">
<button onclick="showall()" title="Hide/show all"><span id="show">Show all</span></button>
</div>
问题是,当您“ showAll”时,无论元素处于当前状态如何,都将切换“ show”类。因此,您要做的第一件事是检查所需的行为,如果未显示任何元素,则您要显示所有元素,如果显示所有元素,则要隐藏元素。见下文。
function popupD1() {
var popup = document.getElementById("myPopupD1");
popup.classList.toggle("show");
var image = document.getElementById("arrow1");
if (image.getAttribute('src') == "arrow.png") {
image.src = "arrowL.png";
} else {
image.src = "arrow.png";
}
var D1S = document.getElementById("D1S");
if (D1S.textContent == "Show info"){
D1S.textContent = "Hide info";
} else {
D1S.textContent="Show info";
}
}
function D1moreinfo() {
var hide = document.getElementById("D1moreinfo");
if (hide.style.display ==="block"){
hide.style.display = "none";
} else {
hide.style.display = "block";
}
var image = document.getElementById("arrowL1");
if (image.getAttribute('src') == "arrowL.png") {
image.src = "arrow.png";
} else {
image.src = "arrowL.png";
}
}
function popupD2() {
var popup = document.getElementById("myPopupD2");
popup.classList.toggle("show");
var image = document.getElementById("arrow1");
if (image.getAttribute('src') == "arrow.png") {
image.src = "arrowL.png";
} else {
image.src = "arrow.png";
}
var D1S=document.getElementById("D2S");
if (D1S.textContent == "Show info") {
D1S.textContent = "Hide info";
} else {
D1S.textContent = "Show info";
}
}
function D2moreinfo(){
var hide=document.getElementById("D2moreinfo");
if (hide.style.display ==="block"){
hide.style.display="none";
} else {
hide.style.display="block";
}
var image = document.getElementById("arrowL1");
if (image.getAttribute('src') == "arrowL.png") {
image.src = "arrow.png";
} else {
image.src = "arrowL.png";
}
}
function showall() {
var D1 = document.getElementById("myPopupD1");
var D2 = document.getElementById("myPopupD2");
var D1M = document.getElementById("D1moreinfo");
var D2M = document.getElementById("D2moreinfo");
// First we check if all elements are showing
var allShowing = (D1.classList.contains("show") &&
D2.classList.contains("show"));
// Then we allways hide the elements
D1.classList.remove("show");
D2.classList.remove("show");
// If any element was hidden, we show all of them
if (!allShowing) {
D1.classList.add("show");
D2.classList.add("show");
}
if (D1M.style.display === "block") {
D1M.style.display = "none";
} else {
D1M.style.display = "block";
}
if (D2M.style.display ==="block") {
D2M.style.display="none";
} else {
D2M.style.display="block";
}
}
.D1 {
border: 1px solid;
border-color: red;
width: 450px;
height: 220px;
margin-top: 10px;
}
#D1button {
border: none;
overflow: hidden;
background-color: transparent;
display: block;
position: absolute;
left: 390px;
top: 175px;
color: red;
}
.popupD1 {
position: relative;
display: inline-block;
cursor: pointer;
}
.popupD1 .popuptextD1 {
visibility: hidden;
width: 250px;
height: 210px;
color: red;
text-align: center;
border-radius: 6px;
padding: 8px 0;
left: 370px;
position: absolute;
z-index: 0;
top: 20px;
background-color: gray;
margin-left: 100px;
}
.popupD1 .popuptextD1:hover {
transition: 1.5s;
background-image: url(BF4B9.jpg);
color: red;
}
.popupD1 .show {
visibility: visible;
-webkit-animation: fadeIn;
animation: fadeIn 1s;
}
#D1moreinfo {
background-color: transparent;
border-radius: 6px;
width: 200px;
height: relative;
display: none;
position: absolute;
top: -5px;
left: 255px;
}
.D2 {
border: 1px solid;
border-color: red;
width: 450px;
height: 220px;
margin-top: 10px;
}
#D2button {
border: none;
overflow: hidden;
background-color: transparent;
display: block;
position: absolute;
left: 390px;
top: 290px;
color: red;
}
.popupD2 {
position: relative;
display: inline-block;
cursor: pointer;
}
.popupD2 .popuptextD2 {
visibility: hidden;
width: 250px;
height: 210px;
color: red;
text-align: center;
border-radius: 6px;
padding: 8px 0;
left: 370px;
position: absolute;
z-index: 0;
top: 20px;
background-color: gray;
margin-left: 100px;
}
.popupD2 .popuptextD2:hover {
transition: 1.5s;
background-image: url(BF4B9.jpg);
color: red;
}
.popupD2 .show {
visibility: visible;
-webkit-animation: fadeIn;
animation: fadeIn 1s;
}
#D2moreinfo {
background-color: transparent;
border-radius: 6px;
width: 200px;
height: relative;
display: none;
position: absolute;
top: -5px;
left: 255px;
}
.showall {
overflow: hidden;
background-color: transparent;
position: absolute;
top: -4px;
left: 335px;
position: fixed;
border-radius: 10px;
}
<div class="D1">
<div class="popupD1">
<span class="popuptextD1" id="myPopupD1">
*A long text that I'm not gonna paste here*
<br/>
<button id="morebutton1" onclick="D1moreinfo()">
<img id="arrowL1" src="arrow.png"/>
</button>
<div id="D1moreinfo">
<ul>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
</ul>
</div>
</span>
</div>
<img id="D1K" src="XY.png"/>
<button id="D1button" onclick="popupD1()">
<img id="arrow1" src="arrow.png"/>
<br/>
<span id="D1S">Show info</span>
</button>
</div>
<div class="D2">
<div class="popupD2">
<span class="popuptextD2" id="myPopupD2">
*A long text that I'm not gonna paste here*<br>
<button id="morebutton1" onclick="D2moreinfo()">
<img id="arrowL1" src="arrow.png"/>
</button>
<div id="D2moreinfo">
<ul>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
<li>XY</li>
</ul>
</div>
</span>
</div>
<img id="D2K" src="XY.png"/>
<button id="D2button" onclick="popupD2()">
<img id="arrow1" src="arrow.png"/>
<br/>
<span id="D2S">Show info</span>
</button>
</div>
<div class="showall">
<button onclick="showall()" title="Hide/show all">
<span id="show">Show all</span>
</button>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句