单击外部和链接时，Jquery切换表格

Question

这个问题以前可能已经解决了，但我找不到确切的案例。我有一个按钮，点击后，切换一个表格。但是，我也有一个处理程序，用于在div外部单击以关闭它。因此，现在当用户单击链接时，切换事件将不再触发。

JSFIDDLE

<div style="width:110px;">
    <a class="zui-sel-wrapper" id="EQA">
    <span class="zui-sel-def" id="attr-val">Toggle</span>
    <span class="zui-sel-arr">&darr;</span>
    </a>
</div>

<table id="EQAtbl" width="340" cellpadding="0" cellspacing="0" border="1">
    <tr>
    <td>Alpha</td>
    <td>Bravo</td>
    <td>Charly</td>
    </tr>
</table>


$(document).mouseup(function (e) {
    if ($("#EQAtbl").has(e.target).length === 0) {
        $('#EQA').removeClass('zui-sel-state-focus');
        $("#EQAtbl").hide();
    }
});
$(document).ready(function(){
    $('#EQA').click(function(){
        $('#EQAtbl').toggle();
        $(this).toggleClass('zui-sel-state-focus');
    });

    $('#EQA').blur(function(){
        $(this).removeClass('zui-sel-state-focus');
    });
});​

Answer 1

以下是解决方案：

$(document).mouseup(function (e) {
    if ($(e.target).has("#attr-val").length > 0) { //<-- you had wrong logic here
        $('#EQA').removeClass('zui-sel-state-focus');
        $("#EQAtbl").hide();
    }
});

http://jsfiddle.net/fAtL2/

Answer 2

因为你的逻辑是矛盾的。

在你的鼠标上方

if ($("#EQAtbl").has(e.target).length === 0) { // hide

但在你的点击中，切换回它，所以它当然不会切换..该跨度不在您的表中。所以它把它藏起来了..然后在单击事件中切换回

$('#EQA').click(function(){
    $('#EQAtbl').toggle();
   $(this).toggleClass('zui-sel-state-focus');
});

您可以添加检查

$(document).mouseup(function (e) { 
    if ($("#EQAtbl").has(e.target).length === 0 && !$('#EQA').has(e.target).length > 0) {
        $('#EQA').removeClass('zui-sel-state-focus');
        $("#EQAtbl").hide();
    }
});

http://jsfiddle.net/LuRKX/

Answer 3

第一件事是..您已经设置了表的visibility: hidden。

.toggle()将显示/隐藏div。它不会对visibility:hidden ;产生任何影响

.blur()仅适用于输入元素。将不会对锚点产生任何影响

准备好在DOM中移动您的mouseOver代码...并使用.on()附加事件

$(document).ready(function() {
    $('#EQA').on('click', function(e) {
        e.preventDefault();
        debugger;
        $('#EQAtbl').toggle();
        $(this).toggleClass('zui-sel-state-focus');
    });

    $('#EQA').on('blur', function() {
        $(this).removeClass('zui-sel-state-focus');
    });
    $(document).mouseup(function(e) {
        if ($("#EQAtbl").has(e.target).length === 0) {
            $('#EQA').removeClass('zui-sel-state-focus');
            $("#EQAtbl").hide();
        }
    });
});​

CHECK FIDDLE