Need to close the div on clicking anywhere in the browser - jquery
Using CSS and Jquery i made a drop down like thing. (So that i can theme that thing according to my other sites).
My problem is when i click on the div it list the things and when i click within the particular div it is closing. Else it doesn't closing. It's always open.
It should not be always open.
Wh开发者_JS百科at should i want to do if the user clicks outside then the drop down thing must close or hide or display none... whatever....
Any ideas will be grateful....
thanks in advance....
<html>
<head>
<title>JQUERY TEST</title>
</head>
<body>
<script type="text/javascript">
Drupal.behaviors.assignment_report = function (context) {
$(".selectbox-list").click(clickSelect);
$(".custom-selectboxes-replaced-list li").click(clickSelectedItem);
}
function clickSelect() {
$(".custom-selectboxes-replaced-list").toggle();
}
function clickSelectedItem() {
var $ul = $(this).closest('ul');
var curr_ul_class = ($ul.attr('class')); // ul class
var curr_div_class = ($ul.prev().attr('class')); // div class
if(curr_ul_class == 'custom-selectboxes-replaced-list' || curr_div_class == 'selectbox-list') {
$(".selectbox-list").html($(this).html());
$(".custom-selectboxes-replaced-list").toggle();
}
}
</script>
<div class="selectbox-list">
<div class="topic-list-two">All</div>
</div>
<ul class="custom-selectboxes-replaced-list" style="display:none">
<li value=0>All</li>
<li value=1>Pending</li>
<li value=3>completed</li>
</ul>
</body>
</html>
Here's the concept. Div will close if mouse is clicked anywhere outside, but will not close if click is made anywhere inside it.
var $div = $('#div');
$(document.body).click(function(){
if (!$div.has(this).length) { // if the click was not within $div
$div.hide();
}
});
加载中,请稍侯......
精彩评论