javascript - 根据条件使用 slideUp() 和 slideDown() 函数

Question

每当我单击 html 页面上的特定元素（在我的情况下是 tag 中的空白超链接）时，我都会使用代码来切换 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 的 not() 函数。

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

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

Answer 3

尝试关注

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');
        }
    }
});