Question

在我的导航中，我有一个div。选择此div可以使用选项显示另一个div。我希望用户能够在div之外选择并关闭div，并选择打开它的div，用户显然可以重新打开它。将其视为Facebook导航下拉列表。只是试图复制这种行为。

HTML

<div class="headRight">
  <ul>
    <li><a id="settings"><div id="here">Account Settings</div></a></li>
  </ul>
</div>
<div class="navi">
 <ul>
   <li><a><span>Signout</span></a> 
   </li>
 </ul>
</div>

CSS

#here{
    background-image: url(image.png);background-repeat: no-repeat;background-size: 10px;background-position: 4px 5px;opacity: 1;display: inline-block;height: 15px;overflow: hidden;text-indent: 534px;white-space: nowrap;width: 20px;top: 2px;left: 12px;margin-left: -9px;position: relative;
}
#here.active{
    background-image: url(someimeage.png);background-repeat: no-repeat;background-size: 10px;background-position: 4px 5px;opacity: 1;display: inline-block;height: 15px;overflow: hidden;text-indent: 534px;white-space: nowrap;width: 20px;top: 2px;left: 12px;margin-left: -9px;position: relative;
}
.navi{
    background: white;width: 200px;box-shadow:0px 1px 8px 0px rgba(0, 0, 0, .3);height: 122px;float: right;left: 759px;top: 45px;position: absolute; display:none;
}

JS

$j("#settings").click(function(e){
              if($j("#here").hasClass("active")){
                $j("#here").removeClass("active")
                $j(".navi").hide();
              }
              else{
                $j("#here").addClass("active")
                $j(".navi").show();
              }
            });
            $j(document).click(function(e) {
              if (e.target.className !== "navi" && !$j(".navi").find(e.target).length && $j('.navi').css('display') == 'block') {
                $j(".navi").hide();
              }
            })

Answer 1

一种简单的方法是将点击侦听器添加到所述div和正文

＆＃13;

Internal Exception: org.h2.jdbc.JdbcSQLException: Column "MAJOR_VERSION" not found;

＆＃13;

$("#first").click(function (e) {
	e.stopPropagation();
	$("#second").show();
});

$("body").click(function (e) {
	$("#second").hide();
})

＆＃13;

html, body {
  width: 100%;
  height: 100%;
}

＆＃13;

但是，这个使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="first" style="width: 200px; height: 300px; border: 3px solid black"> </div> <div id="second" style="width: 200px; height: 300px; border: 3px solid black; display: none"> </div>。如果由于某种原因你不想停止传播，因为它嵌套在你想要接收事件的另一个元素中，那么你可以检查调用事件的位置并检查它是否是正文或其他内容。

＆＃13;

event.stopPropagation

＆＃13;

$("#first").click(function (e) {
	$("#second").show();
});

$("body").click(function (e) {
	console.log(event.target.nodeName);
	if (event.target.nodeName != "BODY")
  	return
	$("#second").hide();
})

＆＃13;

html, body {
  width: 100%;
  height: 100%;
}

＆＃13;

选择某个区域时显示div，然后在单击body jQuery时隐藏div

1 个答案: