javascript - 条件に基づいたslideUp（）およびslideDown（）関数の使用

Question

htmlページの特定の要素（私の場合はタグ内の空白のハイパーリンク）をクリックするたびに、コードを使用してhtmlページのパネルを切り替えました。

    <script> 
     $(document).ready(function(){
      $("#technology").click(function(e){
        $("#technology_panel").slideToggle("slow");
        e.preventDefault()
        });
     });
    </script>

パネルを上下に切り替えたいだけであれば、これは問題なく機能します。しかし、実際に必要なのは、特定の要素をクリックするとパネルが下がるのですが、htmlページの他の場所をクリックすると、パネルが上がるはずです。このコードを試しましたが、期待どおりに機能しません。

    if (document.getElementById(planning).click()== true)
    { 
     $(document).ready(function(){
       $("#planning").click(function(e){
         $("#planning_panel").slideDown("slow");
         e.preventDefault()
      });
    });
    }
     else
     {
         $(document).ready(function(){
               $("#planning").click(function(e){
                $("#planning_panel").slideUp("slow");
             e.preventDefault()
             });
           });
     }

Answer 1

クリックイベントをドキュメントにバインドし、クリックされた要素に基づくロジックを使用します

$(document).ready(function() {
    $(document).on('click',function(e) {
        e.preventDefault();
        var $panel = $("#planning_panel");
        if (e.target.id === 'planning') {
            $panel.slideDown('slow');
        } else {
            $panel.slideUp('slow');
        }
    }
});​

Answer 2

フォローしてみてください

jQuery(document).ready(function() {
    $("#planning").click(function(e) {
        e.preventDefault();
        var $this = jQuery(this);
        var $panel = jQuery("#planning_panel");
        if ($this.is(':hidden')) {
            $panel.slideDown('slow');
        } else {
            $panel.slideUp('slow');
        }
    }
});

Answer 3

JQueryのnot（）関数を使用できます。

$(document).ready(function(){
   $("#planning").click(function(e){
         $("#planning_panel").slideDown("slow");
   });

   $("#planning").not().click(function(e){
         $("#planning_panel").slideUp("slow");
   });
});