点击按钮显示隐藏下拉列表
上周有做到这样一个按钮，就是点击按钮会弹出一个下拉框，再次点击按钮或者点击别的地方下拉框就收起。当时为了方便就直接在网上copy了一段代码，实现了，但是我那时还看不太懂那个代码，代码如下：
$(".js-add-book-btn").on("click", function () {
$(".pst_button").toggle().autoHide();
return false;
});
$.fn.autoHide = function () {
var ele = $(this);
$(document).on("click", function (e) {
if (ele.is(":visible") && (!$(e.target)[0].isEqualNode(ele[0]) && ele.has(e.target).length === 0)) {
ele.hide();
}
});
return this;
};
主要是autoHide方法里面的代码，有些看不太懂。
$(“.pst_button”)就是需要显示和隐藏的下拉框。
使用$.fn拓展autoHide方法，这样会对jquery实例每一个有效，这个方法可以链在toggle方法后面。我网上查了一下jQuery.fn = jQuery.prototype.
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//….
//……
};
autoHide方法中，ele就是$(“.pst_button”)对象，然后为document添加了click事件，if语句中进行判断
ele.is(“:visible”)就是判断下拉框是否是显示的。
$(e.target)[0].isEqualNode(ele[0])：e.target就是这个click事件的直接接受事件的目标DOM元素，ele[0]指的是下拉框的DOM元素，isEqualNode()方法检查两个节点是否相等。合起来就是判断点击的DOM元素是否是下拉框本身。
ele.has(e.target).length === 0：下拉框包含点击的目标元素的个数为0
这三个条件合起来就是：如果下拉框是显示的 并且 点击事件的目标元素不是下拉框或者下拉框的子集，那么下拉框就隐藏。
最后return this 是为了可以链式调用
这是我的理解，不知道这个功能的其他方法是怎么实现的。
