下拉菜单关闭时，用户点击自选显示或还隐藏下拉菜单淡入类体或外下拉菜单

Question

JSFiddle Demo

的Html

<input type="text" class="js-search" name="" value=""> 

<div class="category-list"> 
    <i class="icon-close"></i> 
    <div class="select-column"> 
    <ul> 
     <li> 
     <a class="category-select" href="#">Test1</a> 
     </li> 
     <li> 
     <a class="category-select" href="#">Test2</a> 
     </li> 
     <li> 
      <a class="category-select" href="#">Test3</a> 
     </li> 
     </ul> 
    </div> 
</div> 

JQuery的

var search = $('.js-search'); 
var menu = $('.category-list'); 
var close = $('.icon-close'); 
var category = $('.category-select'); 
search.on('click', function(e){ 
    e.preventDefault(); 
    menu.fadeIn("normal", function() { 
     $(this).show(); 
     $(document).click(function(e){ 
      menu.fadeOut("normal", function() { 
      $(this).hide(); 
}); 
    }); 
    close.on('click', function(){ 
     menu.fadeOut("normal", function() { 
     $(this).hide(); 
     }); 
    }); 
    category.on('click', function(){ 
     var el = $(this); 
     search.val(""); 
     menu.fadeOut("normal", function(){ 
     $(this).hide(); 
     }); 

     search.val(el.text()); 
    }); 
}); 
}); 
$('body').click(function(e) { 
    if ($(e.target).closest(menu).length === 0) { 
     menu.fadeOut("normal", function() { 
      $(this).hide(); 
      }); 
    } 
}); 

上的任何地方。剩下的问题是菜单每次点击输入字段时都会继续打开和关闭。看着谷歌回答，但徒劳无功。可能忽略了一些缺失的东西。或者代码不正确。

帮助感谢！

Answer 1

没有“click处理程序在click处理程序”的简化代码。整个想法是打开<input>点击下拉菜单，把选择的<a>文本<input>并隐藏在单击下拉除了<input>任何地方：

Updated fiddle

$(document).ready(function() 
{ 
    var search = $('.js-search'); 
    var menu = $('.category-list'); 
    var category = $('.category-select'); 

    search.on('click', function() 
    { 
     menu.fadeIn("normal"); 
     return false; 
    }); 

    category.on('click', function() 
    { 
     search.val($(this).text()); 
    }); 

    $(document).on('click', function() 
    { 
     menu.fadeOut("normal"); 
    }); 
});