jQuery – Hide menu/sidebar when click in the body area
Question
I'm very new to jQuery and coding in general and have been trying to get this sidebar to work. When you click on the INFO link a sidebar opens up. As of right now you can only close the sidebar by clicking on the X in the corner, but I want to also be able to close the sidebar when you click in the body area (but not when you click in the sidebar area). I got this to work sort of, but then I wasn't able to open any of my links to view my projects (only the second project, Frankenstein eBook, has a functioning link as of now).
Also, why are you able to click on the whole width of the line the X is on instead of just the X to close the sidebar?
I've seen a lot of similar problems on here but could never quite match it up to mine specifically. Any help would be awesome, and i Thank you!
Here is my site: Josh Diaz Portfolio
And here is a JSFiddle: JSFiddle
My HTML:
<div class="wrap">
<!--Sidebar-->
<!--Info Panel-->
<div class="infoPanel">
<nav class="closeBtn"> <a href="#">X</a>
</nav>
<div class="infoText">
<h2>infoPanel</h2>
<p>Copy goes here.</p>
</div>
</div>
<section class="sidebar">
<div class="sidebarNav">
<nav> <a class="infoLink" href="#">INFO</a>
</nav>
</div>
<div class="content">
<section class="projects">
<div class="wrapper">
<ul class="grid">
<li> <a href="prj.html">
<div class="caption"><span>Image Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
<li> <a href="prj.html">
<div class="caption"><span>Image Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
<li> <a href="prj.html">
<div class="caption"><span>Images Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
<li> <a href="prj.html">
<div class="caption"><span>Image Go Here</span></div>
<img src="http://educ.jmu.edu/~diazjr/portfolio_website/images/coming_soon.jpg" />
</a>
</li>
</ul>
</div>
</section>
</div>
</section>
My JS:
$(document).ready(function () {
var menu = "close";
$('.infoLink').click(function () {
if (menu == "close") {
$('.infoPanel').css('-webkit-transform', 'translate(0,0)');
menu = "open";
} else {
$('.infoPanel').css('-webkit-transform', 'translate(100%,0)');
menu = "close";
}
});
$('.closeBtn').click(function () {
if (menu == "close") {
$('.infoPanel').css('-webkit-transform', 'translate(0,0)');
menu = "open";
} else {
$('.infoPanel').css('-webkit-transform', 'translate(100%,0)');
menu = "close";
}
});
});
2 answers
solution1
0 2014-04-22 00:04:51
You can try something like this:
Your HTML
<body>
<div id="content"></div>
<div id="sidebar"></div>
</body>
And your JS
$('body').click(function(){
$('#sidebar').hide(); //hide sidebar when body is clicked
});
$('#sidebar').click(function(e){
e.stopPropagation(); //this call will cancel the execution bubble
});
I hope this help.
solution2
0 ACCPTED 2014-04-22 04:50:37
Also, why are you able to click on the whole width of the line the X is on instead of just the X to close the sidebar?
Because $('.closeBtn') is referring to div and not the link, use $('.closeBtn a') instead.
Anyway, heres another Quick and dirty way ( needs a bit of refactoring ) but the idea is there. I'll add comments to this if it works for you: http://jsfiddle.net/Varinder/RfFSv/
$(document).ready(function () {
var menu = "close";
var $infoLink = $(".infoLink");
var $infoPanel = $(".infoPanel");
var $closeButton = $(".closeBtn a");
var $document = $(document);
$infoLink.on("click.nav",function (e) {
e.preventDefault();
e.stopPropagation();
sidebar("open");
});
$closeButton.on("click.nav",function (e) {
e.preventDefault();
e.stopPropagation();
sidebar("close");
});
$document.on("click.nav", function(e) {
if ( !$infoPanel.is(e.target) && $infoPanel.has(e.target).length === 0 ) {
sidebar("close");
}
});
function sidebar(action) {
if (action == "open") {
$('.infoPanel').css('-webkit-transform', 'translate(0,0)');
menu = "open";
} else if (action == "close") {
console.log("stuff");
$('.infoPanel').css('-webkit-transform', 'translate(100%,0)');
menu = "close";
}
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.