在“关闭按钮”下的“在按钮”在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中

回答

相关问题