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

Using slideUp() and slideDown() functions based on conditions

本文关键字：slideDown 函数 slideUp 条件      更新时间：2023-09-26

每当我单击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()
             });
           });
     }

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

try following

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

可以使用JQuery的not()函数

$(document).ready(function(){
   $("#planning").click(function(e){
         $("#planning_panel").slideDown("slow");
   });
   $("#planning").not().click(function(e){
         $("#planning_panel").slideUp("slow");
   });
});
相关文章：