工学1号馆

home

点击显示隐藏的DIV,点击DIV外面隐藏DIV

Wu Yudong    December 22, 2020     HTML5+CSS3   178   

最近项目中需要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();
        }
    });
});

 

如果文章对您有帮助,欢迎点击下方按钮打赏作者

Comments

No comments yet.
To verify that you are human, please fill in "七"(required)