Hide and close a hidden div

I have a hidden fixed div and want to display it if I click on a btn, and close if I click on any where else. Right now, I can hide the div if I click on a button or any where on the page.

For the code below, I have achieve half of what I want. However, I want to the div still open (visible) if I click on any where in the green box. Can anyone suggest any idea to help me achieve that?

$(function() {
	var OPEN = 0;			/* Offset to Open */
	var CLOSE = -10000;		/* Offset to Close */

	var t = 0;      		/* Default time */
	var $obtn = $(".obtn-side");
	var $cbtn = $(".cbtn-side");
	var main = ".main-wrapper";

	$obtn.click(function(event) {
		event.preventDefault();
		var cid = $(this).attr("href"); /* Get the container id */
		navEffect(cid, OPEN, 0);
	});


	$cbtn.click(function(event) {
		event.preventDefault();
		var cid = $(this).attr("href");

		navEffect(cid, CLOSE, 0);
	});

	$(".side-wrapper").click(function(event) {
			navEffect("#side", CLOSE, 0);

	});

});

function navEffect(c, o, t) {
	var $con = $(c);
	$con.animate({
		right: o
	}, t);
}

.side-wrapper {
	position: fixed;
	top: 0px;
	width: 100%;
	height: 100%;
	background: black;
	right: -1100%;
}

.side-container {
	float: right;
	background: green;
	width: 50%;
	height: 100%;
	position: relative;	
	box-shadow: 0px 0px 5px 2px rgba(52, 73, 94, 0.9);
	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="side" class="side-wrapper">
	<div class="side-container">
		<a class="cbtn-side" href="#side">x</a>
        <div>
          <h1>Side bar</h1>
        </div>
	</div>
</div>

<a class="obtn-side" href="#side">open</a>

---

You need to stop event bubbling in case of the click on the green area .side-container :

$(".side-container").click(function(e) {
    e.stopPropagation();
});

Check the demo below.

$(function() {
	var OPEN = 0;			/* Offset to Open */
	var CLOSE = -10000;		/* Offset to Close */

	var t = 0;      		/* Default time */
	var $obtn = $(".obtn-side");
	var $cbtn = $(".cbtn-side");
	var main = ".main-wrapper";

	$obtn.click(function(event) {
		event.preventDefault();
		var cid = $(this).attr("href"); /* Get the container id */
		navEffect(cid, OPEN, 0);
	});


	$cbtn.click(function(event) {
		event.preventDefault();
		var cid = $(this).attr("href");

		navEffect(cid, CLOSE, 0);
	});

	$(".side-wrapper").click(function(event) {
			navEffect("#side", CLOSE, 0);

	});
  
    $(".side-container").click(function(e) {
      e.stopPropagation();
    });

});

function navEffect(c, o, t) {
	var $con = $(c);
	$con.animate({
		right: o
	}, t);
}

.side-wrapper {
	position: fixed;
	top: 0px;
	width: 100%;
	height: 100%;
	background: black;
	right: -1100%;
}

.side-container {
	float: right;
	background: green;
	width: 50%;
	height: 100%;
	position: relative;	
	box-shadow: 0px 0px 5px 2px rgba(52, 73, 94, 0.9);
	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="side" class="side-wrapper">
	<div class="side-container">
		<a class="cbtn-side" href="#side">x</a>
        <div>
          <h1>Side bar</h1>
        </div>
	</div>
</div>

<a class="obtn-side" href="#side">open</a>

链接地址: http://www.djcxy.com/p/83958.html

上一篇: 使用按钮显示div并隐藏它，如果在div外单击

下一篇: 隐藏并关闭隐藏的div