I have got many dropdowns in my site and i want to make a reusable function with jquery so i can save a lot of code just by a single function. Can any one help me out in this regard... For an example
<div id="clickMe">
<div id="showMe">
<div>I am dropdown item</div>
</div>
</div>
right now i am using it like this way...
$(document).ready(function() {
$("#clickMe").click(function(e) {
e.preventDefault();
$("#showMe").toggle();
$("#clickMe").toggleClass("menu-open");
});
$("#showMe").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
if($(e.target).parent("#clickMe").length==0) {
$("#clickMe").removeClass("menu-open");
$("#showMe").hide();
}
});
});
but now i want to make it more reusable... Thanks in advance...
You might use html's class property to identify all the divs with drop-down, and add the event-listener by jQuery's class selector, for example:
ReplyDelete<script type="text/javascript">
//reusable function
function addMyListener(){
$(".showClass > div").click(function(){
if($(".showClass").prop("enabled")){
//do some thing while click drop-down item
}
});
}
$(function(){
//call the function while document is ready
addMyListener();
});
</script>
<div id="clickMe">
<!-- add class="showDiv" for all showMe like divs -->
<div id="showMe" class="showClass">
<div>I am dropdown item</div>
</div>
</div>