Functions in Jquery

Question

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...

That's an amazingly vague question. If you want to create a function, then create a function. I'm confused what your exact goal is. — Corbin, Jan 31 '12 at 08:36

score 0 · Accepted Answer · answered Jan 31 '12 at 08:49

0

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:

<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>

answered Jan 31 '12 at 08:49

taiansu

2,735
2
22
29

i wanna make a function like this..function dropdown ( selecter , to_show, activeClass ){ $select = $('selecter'); $show = $('to_show'); $activeClass = $('activeClass'); // default $select.show(); $show.hide(); //on click event $select.click(function() { $show.toggle(); $select.toggleClass('$activeClass'); }); //mouse up false on open div $show.mouseup(function(){ return false; }); //Finally hide div if clicked outside $(document).mouseup(function(e){ if(($(e.target).parent('$select').length == 0)){ $show.hide(); $select.removeClass('$activeClass'); } }); }; – Gaurav Mehra Jan 31 '12 at 09:23

Functions in Jquery

1 Answers1