Jqueryの関数

Question

私は自分のサイトに多くのドロップダウンを持っており、jqueryで再利用可能な関数を作成したいので、1つの関数だけで多くのコードを保存できます。今、私はこの方法のように、それを使用していますいずれか

たとえば、この点... で私を助け

<div id="clickMe"> 
    <div id="showMe"> 
     <div>I am dropdown item</div> 
    </div> 
</div> 

...

$(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(); 
    } 
    }); 
}); 

ことができますが、今私はそれをもっと作りたいです再利用可能な...事前に おかげで...

Answer 1

あなたがドロップダウンですべてのdiv Sを特定し、例えば、jQueryのクラスセレクタでイベントリスナーを追加するために、HTMLのclassプロパティを使用する場合があります。

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