关闭输入焦点上的滑动菜单

Close slide menu on input focus

本文关键字：菜单 输入 焦点      更新时间：2023-09-26

>我有一个搜索栏，幻灯片菜单中有额外的选项。我让一切正常，但我所需要的只是当您再次专注于输入时关闭菜单。

https://jsfiddle.net/ny51mzp8/2/

检查小提琴...打开菜单并重新关注输入...菜单将保持打开状态，直到您再次单击该按钮。请我需要两个选项都工作。我只听说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");
  });
});

使用 $.focus() 方法。

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

点击输入可以吗？

$(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

相关文章：