带延迟调整的onclick切换类

Question

我有一个按钮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

Answer 1

从未使用过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>