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

将click事件绑定到文档并使用基于单击元素的逻辑

$(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＆＃39; not（）函数。

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

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

根据条件使用slideUp（）和slideDown（）函数

3 个答案: