Wu Yudong's Blog

最近项目中需要js实现如下功能：点击一个div A，显示另一个div B，点击div A或其他部分div B消失。

之前的div A只有一个比较好实现

$(function () {
    $(document).on("click",function (e) {
        if (e.target === $('.avtar-btn')[0]) {
            if($('.root-menu').is(":visible")){
                $('.root-menu').hide();
            } else {
                $('.root-menu').show();
            }

        } else {
            $('.root-menu').hide();
        }
    });
});

但是后来的需求发生了变化，如果一个页面出现了多个相同class的div A，上面的代码就起作用了，问题出在$('.avtar-btn')[0]，这里的[0]只取第一个class，所以代码修改为：

$(function () {
    $(document).on("click", function (e) {
        if ($(e.target).hasClass('shareBtn')) {
            $item = $(e.target).next();
            if($item.is(":visible")){
                $item.hide();
            } else {
                $item.show();
            }
        } else {
            $('.share-panel').hide();
        }
    });
});