Question

我在幻灯片菜单中有一个搜索栏和附加选项。我已经完成了所有工作，但我需要的是当你再次聚焦输入时关闭的菜单。

检查小提琴...打开菜单并重新对准输入...菜单保持打开状态，直到您再次单击该按钮。我需要两种选择。我只听过＆＃34; keyup＆＃34;来自jquery将实现这一点。

到目前为止，我已经准备好了这个方法：

$(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");
  });
});

Answer 1

使用$.focus()方法。

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

Answer 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

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

2 个答案: