代码之家 › 专栏 › 技术社区 › vishnu

带延迟调整的onclick toggle类

css html jquery javascript

vishnu · 技术社区 · 6 年前

toggleClass 和 setTimeout 函数,目前它是工作的基础上编写的脚本,但我不需要延迟第一次点击。 快速隐藏div并延迟显示

$(document).ready(function() {
  $(".button").click(function() {
    window.setTimeout(function() {
      $(".search").toggleClass("hide");
    }, 250);
  });
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<button class="button" type="button">nav</button>
<div class="search"><input type="text" placeholder="Search"></div>

JSFiddle

3 回复 | 直到 6 年前

niclas_4 6 年前

从未使用过jquery,但这应该可以工作,不确定它是否是最干净的解决方案。

    $(document).ready(function() {
      $(".button").click(function() {
        if($(".search").hasClass("hide"))
        {
           window.setTimeout(function() {
               $(".search").toggleClass("hide");
           }, 250);
        }
   else $(".search").toggleClass("hide");
      });
    });

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<button class="button" type="button">nav</button>
<div class="search"><input type="text" placeholder="Search"></div>

Ali Sheikhpour 6 年前

检查元素是否可见或隐藏,然后决定要执行的操作:

$(document).ready(function() {
  $(".button").click(function() {
     if ($(".search").is(":visible")){
         $(".search").addClass("hide");
      } 
    else{
         window.setTimeout(function() {
         $(".search").toggleClass("hide");
         }, 250);
     }
  });
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<button class="button" type="button">nav</button>
<div class="search"><input type="text" placeholder="Search"></div>

Just code 6 年前

firstClick ,最初为true,然后为所有单击 false

$(document).ready(function() {
var firstClick =true;
  $(".button").click(function() {
    window.setTimeout(function() {
    firstClick=false;
      $(".search").toggleClass("hide");
    }, firstClick?0:250);
  });
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<button class="button" type="button">nav</button>
<div class="search"><input type="text" placeholder="Search"></div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

5 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

6 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

6 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

6 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前