在「關閉按鈕」下的「在按鈕」在javascript中

我有一些圓divs，當點擊切換顯示一個孩子div使用javascript，但我想有圍繞圓div的區域隱藏孩子。如果你有取消選擇功能綁定到容器的圓圈，他們停止工作，因爲兩個函數取消，所以我已經嘗試在容器內部使用css位置和z-index佔用與容器相同的空間而不用「母親圈子」作爲孩子。這也不起作用，因爲依賴於z-index值，或者一個元素或者另一個獲得它的函數運行，並且如果它們具有相同的z-index圓圈：懸停甚至不工作，更不用說Javascript。在「關閉按鈕」下的「在按鈕」在javascript中

Codepen.io

var tydParent = [null, document.getElementById("tydP1"), document.getElementById("tydP2"), document.getElementById("tydP3"), document.getElementById("tydP4"), document.getElementById("tydP5"), document.getElementById("tydP6"), document.getElementById("tydP7"), document.getElementById("tydP8"), document.getElementById("tydP9"), document.getElementById("tydP10") 
 
    ] 
 
    
 
    var tydChild = [null, document.getElementById("tydC1"), document.getElementById("tydC2"), document.getElementById("tydC3"), document.getElementById("tydC4"), document.getElementById("tydC5"), document.getElementById("tydC6"), document.getElementById("tydC7"), document.getElementById("tydC8"), document.getElementById("tydC9"), document.getElementById("tydC10") 
 
    ] 
 
    
 
    var tydState = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; 
 
    
 
    function tydToggle(tydNum) { 
 
    \t if (tydState[tydNum] == 0) { 
 
    \t \t tydDeselect(); 
 
    \t \t tydParent[tydNum].className = "tydParentActive shadow4a tydParent"; 
 
    \t \t tydChild[tydNum].style.display = "block"; 
 
    \t \t tydState[tydNum] = 1; 
 
    \t } else { 
 
    \t \t tydParent[tydNum].className = "shadow4a tydParent"; 
 
    \t \t tydChild[tydNum].style.display = "none"; 
 
    \t \t tydState[tydNum] = 0; 
 
    \t } 
 
    } 
 
    
 
    function tydDeselect() { 
 
    \t for (i = 1; i < tydState.length; i++) { 
 
    \t \t \t tydState[i] = 0; 
 
    \t \t \t tydChild[i].style.display = "none"; 
 
    \t \t \t tydParent[i].className = "shadow4a tydParent"; 
 
    \t \t } 
 
    }

 .tydContainer { 
 
     \t position:relative; 
 
     \t height: auto; 
 
     \t width: 100%; 
 
     \t margin: 0; 
 
     \t padding:0 75px; 
 
     \t display: -webkit-box; 
 
     \t display: -webkit-flex; 
 
     \t display: -ms-flexbox; 
 
     \t display: flex; 
 
     \t -webkit-flex-wrap: wrap; 
 
     \t  -ms-flex-wrap: wrap; 
 
     \t   flex-wrap: wrap; 
 
     \t -webkit-justify-content: space-around; 
 
     \t  -ms-flex-pack: distribute; 
 
     \t   justify-content: space-around; 
 
     } 
 
     
 
     .tydParent { 
 
     \t /*z-index:2;*/ 
 
     \t width: 110px; 
 
     \t height: 110px; 
 
     \t border: 2px solid #93305D; 
 
     \t border-radius: 55px; 
 
     \t margin: 10px; 
 
     \t cursor:pointer; 
 
     \t background-color: #cccccc; 
 
     } 
 
     
 
     .tydParent:hover{ 
 
     \t background-color: #93305D; 
 
     \t border-color: #F2F1F1; 
 
     } 
 
     
 
     .tydParentActive{ 
 
     \t background-color: #F63E37 !important; 
 
     \t border-color: #F2F1F1 !important; 
 
     } 
 
     
 
     .tydParentPosition { 
 
     \t position: relative; 
 
     } 
 
     
 
     .tydClickoff{ 
 
     \t /*z-index:1;*/ 
 
     \t position: absolute; 
 
     \t width:100%; 
 
     \t height:100%; 
 
     \t bottom:0; 
 
     \t left:0; 
 
     } 
 
     
 
     .tydChild { 
 
     \t z-index:3; 
 
     \t overflow:hidden; 
 
     \t display: none; 
 
     \t position: absolute; 
 
     \t bottom: 100%; 
 
     \t width: 350px; 
 
     \t height: 300px; 
 
     \t left: -110px; 
 
     \t background-color: #E3EBF1; 
 
     \t border-radius: 10px; 
 
     \t border: 1px solid #333333; 
 
     } 
 
     
 
     .tydImageBlock { 
 
     \t display: flex; 
 
     \t width: 350px; 
 
     \t height: 70%; 
 
     \t margin: 5px 0; 
 
     } 
 
     
 
     p.tydChildDescription { 
 
     \t width: 100%; 
 
     \t height: 30%; 
 
     \t line-height: 16px; 
 
     \t font-size:14px; 
 
     \t padding: 10px; 
 
     \t color: #333333; 
 
     \t text-align: center; 
 
     } 
 
    #tydP1 { 
 
    \t background-image: url('test2.png'); 
 
    } 
 
    
 
    #tydP2 { 
 
    \t background-image: url('test2.png'); 
 
    } 
 
    
 
    #tydP3 { 
 
    \t background-image: url('test2.png'); 
 
    } 
 
    
 
    #tydP4 { 
 
    \t background-image: url('test2.png'); 
 
    } 
 
    
 
    #tydP5 { 
 
    \t background-image: url('test2.png'); 
 
    } 
 
    
 
    #tydP6 { 
 
    \t background-image: url('test2.png'); 
 
    } 
 
    
 
    #tydP7 { 
 
    \t background-image: url('test2.png'); 
 
    } 
 
    
 
    #tydP8 { 
 
    \t background-image: url('test2.png'); 
 
    } 
 
    
 
    #tydP9 { 
 
    \t background-image: url('test2.png'); 
 
    } 
 
    
 
    #tydP10 { 
 
    \t background-image: url('test2.png'); 
 
    }

\t <div class="tydContainer"> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP1" onclick="tydToggle(1)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC1" style="background: url('KQLY2.png');"> 
 
\t \t \t \t <div class="tydImageBLock"></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP2" onclick="tydToggle(2)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC2" style="background: url('KQLY1.png');"> 
 
\t \t \t \t <div class="tydImageBlock" ></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow<a href="https://sakaiproject.org/">MORE&#8680;</a></p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP3" onclick="tydToggle(3)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC3" style="background: url('KQLY3.png');"> 
 
\t \t \t \t <div class="tydImageBlock"></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP4" onclick="tydToggle(4)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC4" style="background: url('KQLY4.gif');"> 
 
\t \t \t \t <div class="tydImageBlock"></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP5" onclick="tydToggle(5)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC5" style="background: url('KQLY5.gif');"> 
 
\t \t \t \t <div class="tydImageBlock"></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP6" onclick="tydToggle(6)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC6" style="background: url('KQLY6.gif');"> 
 
\t \t \t \t <div class="tydImageBlock"></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP7" onclick="tydToggle(7)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC7" style="background: url('KQLY4.gif');"> 
 
\t \t \t \t <div class="tydImageBlock"></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP8" onclick="tydToggle(8)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC8" style="background: url('KQLY3.png');"> 
 
\t \t \t \t <div class="tydImageBlock"></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP9" onclick="tydToggle(9)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC9" style="background: url('KQLY2.png');"> 
 
\t \t \t \t <div class="tydImageBlock"></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP10" onclick="tydToggle(10)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC10" style="background: url('KQLY6.gif');"> 
 
\t \t \t \t <div class="tydImageBlock"></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydClickoff" style="border: 1px solid violet;" onclick="tydDeselect()"></div> 
 
\t 
 
\t </div> 
 
</div>

來源

2016-07-14 Brendan Jackson

您可能希望建立一個爲的jsfiddle這個問題：https://jsfiddle.net/ – WillardSolutions

什麼jsfiddle和codepen.io的區別是什麼？ –

沒有區別;只需在其中一個代碼中設置所有代碼並將鏈接粘貼到您的問題中 – WillardSolutions

你應該傳播到外層div停止點擊事件，使用event.stopPropagation（）。

見https://plnkr.co/edit/MqNhHJy9m5vtgrwOWgVh?p=preview

onclick="tydToggle(event, 1)" 
... 
function tydToggle(event, tydNum) { 
    event = event || window.event; 
    event.stopPropagation() 
    ...

來源

2016-07-14 16:45:22

你不會得到任何懸停或點擊事件，因爲「tydClickOff」分區被覆蓋了。擺脫這一點，圈子似乎開關關閉...我不確定你究竟是什麼效果。

JS看起來很複雜，你有沒有考慮過使用jQuery？

var tydParent = [null, document.getElementById("tydP1"), document.getElementById("tydP2"), document.getElementById("tydP3"), document.getElementById("tydP4"), document.getElementById("tydP5"), document.getElementById("tydP6"), document.getElementById("tydP7"), document.getElementById("tydP8"), document.getElementById("tydP9"), document.getElementById("tydP10") 
 
    ] 
 
    
 
    var tydChild = [null, document.getElementById("tydC1"), document.getElementById("tydC2"), document.getElementById("tydC3"), document.getElementById("tydC4"), document.getElementById("tydC5"), document.getElementById("tydC6"), document.getElementById("tydC7"), document.getElementById("tydC8"), document.getElementById("tydC9"), document.getElementById("tydC10") 
 
    ] 
 
    
 
    var tydState = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; 
 
    
 
    function tydToggle(tydNum) { 
 
    \t if (tydState[tydNum] == 0) { 
 
    \t \t tydDeselect(); 
 
    \t \t tydParent[tydNum].className = "tydParentActive shadow4a tydParent"; 
 
    \t \t tydChild[tydNum].style.display = "block"; 
 
    \t \t tydState[tydNum] = 1; 
 
    \t } else { 
 
    \t \t tydParent[tydNum].className = "shadow4a tydParent"; 
 
    \t \t tydChild[tydNum].style.display = "none"; 
 
    \t \t tydState[tydNum] = 0; 
 
    \t } 
 
    } 
 
    
 
    function tydDeselect() { 
 
    \t for (i = 1; i < tydState.length; i++) { 
 
    \t \t \t tydState[i] = 0; 
 
    \t \t \t tydChild[i].style.display = "none"; 
 
    \t \t \t tydParent[i].className = "shadow4a tydParent"; 
 
    \t \t } 
 
    }

 .tydContainer { 
 
     \t position:relative; 
 
     \t height: auto; 
 
     \t width: 100%; 
 
     \t margin: 0; 
 
     \t padding:0 75px; 
 
     \t display: -webkit-box; 
 
     \t display: -webkit-flex; 
 
     \t display: -ms-flexbox; 
 
     \t display: flex; 
 
     \t -webkit-flex-wrap: wrap; 
 
     \t  -ms-flex-wrap: wrap; 
 
     \t   flex-wrap: wrap; 
 
     \t -webkit-justify-content: space-around; 
 
     \t  -ms-flex-pack: distribute; 
 
     \t   justify-content: space-around; 
 
     } 
 
     
 
     .tydParent { 
 
     \t /*z-index:2;*/ 
 
     \t width: 110px; 
 
     \t height: 110px; 
 
     \t border: 2px solid #93305D; 
 
     \t border-radius: 55px; 
 
     \t margin: 10px; 
 
     \t cursor:pointer; 
 
     \t background-color: #cccccc; 
 
     } 
 
     
 
     .tydParent:hover{ 
 
     \t background-color: #93305D; 
 
     \t border-color: #F2F1F1; 
 
     } 
 
     
 
     .tydParentActive{ 
 
     \t background-color: #F63E37 !important; 
 
     \t border-color: #F2F1F1 !important; 
 
     } 
 
     
 
     .tydParentPosition { 
 
     \t position: relative; 
 
     } 
 
     
 
     .tydClickoff{ 
 
     \t /*z-index:1;*/ 
 
     \t position: absolute; 
 
     \t width:100%; 
 
     \t height:100%; 
 
     \t bottom:0; 
 
     \t left:0; 
 
     } 
 
     
 
     .tydChild { 
 
     \t z-index:3; 
 
     \t overflow:hidden; 
 
     \t display: none; 
 
     \t position: absolute; 
 
     \t bottom: 100%; 
 
     \t width: 350px; 
 
     \t height: 300px; 
 
     \t left: -110px; 
 
     \t background-color: #E3EBF1; 
 
     \t border-radius: 10px; 
 
     \t border: 1px solid #333333; 
 
     } 
 
     
 
     .tydImageBlock { 
 
     \t display: flex; 
 
     \t width: 350px; 
 
     \t height: 70%; 
 
     \t margin: 5px 0; 
 
     } 
 
     
 
     p.tydChildDescription { 
 
     \t width: 100%; 
 
     \t height: 30%; 
 
     \t line-height: 16px; 
 
     \t font-size:14px; 
 
     \t padding: 10px; 
 
     \t color: #333333; 
 
     \t text-align: center; 
 
     } 
 
    #tydP1 { 
 
    \t background-image: url('test2.png'); 
 
    } 
 
    
 
    #tydP2 { 
 
    \t background-image: url('test2.png'); 
 
    } 
 
    
 
    #tydP3 { 
 
    \t background-image: url('test2.png'); 
 
    } 
 
    
 
    #tydP4 { 
 
    \t background-image: url('test2.png'); 
 
    } 
 
    
 
    #tydP5 { 
 
    \t background-image: url('test2.png'); 
 
    } 
 
    
 
    #tydP6 { 
 
    \t background-image: url('test2.png'); 
 
    } 
 
    
 
    #tydP7 { 
 
    \t background-image: url('test2.png'); 
 
    } 
 
    
 
    #tydP8 { 
 
    \t background-image: url('test2.png'); 
 
    } 
 
    
 
    #tydP9 { 
 
    \t background-image: url('test2.png'); 
 
    } 
 
    
 
    #tydP10 { 
 
    \t background-image: url('test2.png'); 
 
    }

\t <div class="tydContainer"> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP1" onclick="tydToggle(1)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC1" style="background: url('KQLY2.png');"> 
 
\t \t \t \t <div class="tydImageBLock"></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP2" onclick="tydToggle(2)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC2" style="background: url('KQLY1.png');"> 
 
\t \t \t \t <div class="tydImageBlock" ></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow<a href="https://sakaiproject.org/">MORE&#8680;</a></p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP3" onclick="tydToggle(3)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC3" style="background: url('KQLY3.png');"> 
 
\t \t \t \t <div class="tydImageBlock"></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP4" onclick="tydToggle(4)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC4" style="background: url('KQLY4.gif');"> 
 
\t \t \t \t <div class="tydImageBlock"></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP5" onclick="tydToggle(5)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC5" style="background: url('KQLY5.gif');"> 
 
\t \t \t \t <div class="tydImageBlock"></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP6" onclick="tydToggle(6)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC6" style="background: url('KQLY6.gif');"> 
 
\t \t \t \t <div class="tydImageBlock"></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP7" onclick="tydToggle(7)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC7" style="background: url('KQLY4.gif');"> 
 
\t \t \t \t <div class="tydImageBlock"></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP8" onclick="tydToggle(8)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC8" style="background: url('KQLY3.png');"> 
 
\t \t \t \t <div class="tydImageBlock"></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP9" onclick="tydToggle(9)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC9" style="background: url('KQLY2.png');"> 
 
\t \t \t \t <div class="tydImageBlock"></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="tydParentPosition"> 
 
\t \t \t <div class="shadow4a tydParent" id="tydP10" onclick="tydToggle(10)"></div> 
 
\t \t \t <div class="shadow4a tydChild" id="tydC10" style="background: url('KQLY6.gif');"> 
 
\t \t \t \t <div class="tydImageBlock"></div> 
 
\t \t \t \t <p class="tydChildDescription bOWhite1">stack overflow</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t 
 
</div>

來源

2016-07-14 16:46:08 beercohol

而且我的其他答案，這裏是使用jQuery版本。 JS代碼可以減少到這一點，大概可以整潔依然取得：

$(document).ready(function() { 

    $(".tydParent").click(function() { 
     var $parent = $(this).parent(); 
     tydDeselect($parent); 
     $(this).toggleClass("tydParentActive"); 
     $parent.find(".tydChild").toggle(); 
    }); 

    function tydDeselect(notThis) { 
    var $tPP = $(".tydParentPosition").not(notThis); 
    $tPP.find(".tydParent").removeClass("tydParentActive"); 
    $tPP.find(".tydChild").hide(); 
    } 

});

https://jsfiddle.net/wmpe319g/

來源

2016-07-14 17:08:24 beercohol

謝謝，但我保持與香草js，因爲它是我最新的語言，我仍然在學習。也許將來我會選擇Jquery。 –

在「關閉按鈕」下的「在按鈕」在javascript中

回答

相關問題