0

我有一个像按钮一样的 div 元素。此 div 可以（并且确实）包含更多子 div 和/或跨度、图像等。此外，该 div 上有一个“单击”事件，该事件会向下滑动子菜单。

每当我单击按钮时，我都会尝试显示和隐藏该子菜单，但当我在页面上的任何位置单击按钮外部时，我也会尝试隐藏它。

我的问题是我的页面上有多个按钮，因此对我event.stopPropagation()不起作用，因为如果我单击一个按钮并出现子菜单，然后单击另一个按钮，则会event.stopPropagation()阻止我的第一个 div 隐藏其子菜单。

我不能event.target用来检查我是否点击了按钮，因为目标返回我正在点击的元素，它可以是我的按钮内的图像或我的按钮内的 div 内的 div，我不想去.parent().parent()...检查它是否真的是我的按钮。

我已经在 google.com、jQuery UI datepicker 以及可能一百万个其他网站上看到过这种做法，乍一看它看起来很容易，但我不知道它是如何完成的。

这是按钮元素的标记：

<div id="testButton" role="button">
 <div>xxxxx</div>
 <div>xxxxx</div>
 <span>john doe</span>
</div>

这是到目前为止的javascript：

(function($){
$.fn.button = function(options) {
    var defaults = {

    }
    var options = $.extend(defaults, options);

    return this.each(function() {
        var button = $(this);
        button.addClass('button');

        button.on({
            mouseover: function() {
                button.addClass('hover');
            },
            mouseout: function() {
                button.removeClass('hover');
            },
            click: function(e) {
                button.toggleClass('clicked');
            }
        });

        $(document).click(function(event){

            console.log($(button).find(event.target));

//              var element = event.target;
//              
//              if ($(element) != $(button)) {
//                  if (button.hasClass('clicked')) {
//                      button.removeClass('clicked');
//                  }
//              }
        });
    });
};  
 })(jQuery);

谢谢。

4

0 回答 0