javascript中“on按钮”下的“关闭按钮”

Question

我有一些圆圈div，当点击切换显示使用javascript的子div时，但我想让圆圈区域div隐藏孩子。如果你有取消选择功能绑定到圆圈的容器，他们停止工作，因为这两个函数取消所以我试图在容器内部使用css位置和z-index占用与容器相同的空间而没有“父圈子”作为孩子。这也不起作用取决于z-index值，一个元素或另一个元素运行它们，如果它们具有相同的z-index圆圈：hover甚至不工作，更不用说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) {
    	if (tydState[tydNum] == 0) {
    		tydDeselect();
    		tydParent[tydNum].className = "tydParentActive shadow4a tydParent";
    		tydChild[tydNum].style.display = "block";
    		tydState[tydNum] = 1;
    	} else {
    		tydParent[tydNum].className = "shadow4a tydParent";
    		tydChild[tydNum].style.display = "none";
    		tydState[tydNum] = 0;
    	}
    }
    
    function tydDeselect() {
    	for (i = 1; i < tydState.length; i++) {
    			tydState[i] = 0;
    			tydChild[i].style.display = "none";
    			tydParent[i].className = "shadow4a tydParent";
    		}
    }

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

	<div class="tydContainer">

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

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

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

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

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

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

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

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

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

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

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

Answer 1

您应该使用event.stopPropagation（）停止click事件传播到外部div。

请参阅https://plnkr.co/edit/MqNhHJy9m5vtgrwOWgVh?p=preview

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

Answer 2

您没有任何悬停或点击事件，因为“tydClickOff”div覆盖了所有内容。摆脱它，圈子似乎打开和关闭......我不确定你到底有什么影响。

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) {
    	if (tydState[tydNum] == 0) {
    		tydDeselect();
    		tydParent[tydNum].className = "tydParentActive shadow4a tydParent";
    		tydChild[tydNum].style.display = "block";
    		tydState[tydNum] = 1;
    	} else {
    		tydParent[tydNum].className = "shadow4a tydParent";
    		tydChild[tydNum].style.display = "none";
    		tydState[tydNum] = 0;
    	}
    }
    
    function tydDeselect() {
    	for (i = 1; i < tydState.length; i++) {
    			tydState[i] = 0;
    			tydChild[i].style.display = "none";
    			tydParent[i].className = "shadow4a tydParent";
    		}
    }

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

	<div class="tydContainer">

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

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

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

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

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

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

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

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

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

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

Answer 3

继我的另一个答案，这是一个使用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/