关闭输入焦点上的幻灯片菜单答案

【问题标题】：Close slide menu on input focus关闭输入焦点上的幻灯片菜单
【发布时间】：2016-02-19 05:07:54
【问题描述】：

我有一个搜索栏，幻灯片菜单中有额外的选项。我已经完成了所有工作，但我只需要在您再次关注输入时关闭菜单。

检查小提琴...打开菜单并重新关注输入...菜单保持打开状态，直到您再次单击按钮。请我需要这两种选择。我只听说 jquery 的 "keyup" 可以做到这一点。

到目前为止，我已经准备好了：

$(document).ready(function() {
 $('#showmenu').click(function() {
  $('.search-baner').toggle("slide", { direction: "left" }, 500);
  $("span",this).toggleClass("ion-arrow-right-b ion-arrow-left-b");
  $("#showmenu",this).toggleClass("not-pressed pressed");
  });
});

【问题讨论】：

问题只是如何关闭菜单并专注于文本输入。就那么简单。也许我写的太多了 :) （现在你只能通过再次切换按钮来关闭它）
忘了提到幻灯片菜单中还有其他按钮......所以点击菜单不会像你建议的那样有帮助:(......它必须是你点击的输入...... .或者只是开始输入。

标签： javascript jquery jquery-ui

【解决方案1】：

使用$.focus() 方法。

$('input').focus(function(){
  $banner = $('.search-baner');
  if ($banner.is(':visible')) {
    $banner.toggle();
  }
});

【讨论】：

谢谢！！！将与此...它在没有幻灯片效果的情况下关闭，但让我们保留这些细节以备后用:)
只需使用 .toggle("slide", {direction: "up"}, 1000);会没事的
太棒了...我有另一个使屏幕变暗的功能...这就是为什么第二次单击...但是我现在设法将它们放在一起，上面的幻灯片效果很好： ) 谢谢大家:)

【解决方案2】：

点击输入好吗？

$(document).ready(function() {
  $('#showmenu').click(function() {
    $('.search-baner').toggle("slide", {direction: "up"}, 1000);

    // Only add the listenner once the menu is deployed
    $('input').on('click', function() {
      $('.search-baner').toggle("slide", {direction: "up"}, 1000);

        // Remove the listenner since we dont wan't the menu to open if we click again
        $(this).unbind('click');
    });

  });
});

JSFiddle

【讨论】：

它正在工作...但是您必须在输入上单击两次，这会让用户感到困惑:)