Question

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

<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

这是因为你的逻辑是矛盾的。

在你的鼠标中

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 2

以下是解决方案：

$(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 3

首先是......你已将可见性：隐藏设置为表格。

.toggle()将显示/隐藏 div。它不会对visibility:hidden ;

产生任何影响

.blur()仅适用于输入元素..不会对锚

产生任何影响

将您的mouseOver代码移到DOM Ready中...并使用 .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

Answer 4

你的意思是：yourJSFIDDLE？尝试修改您的css中的visibility: hidden

Answer 5

我想说，不要仅仅为了简单而使用切换jquery提供它。定义你自己的切换功能总是更好，因为有些时候（在你的情况下也是如此）我们想要切换以遵循更人性化的逻辑方式

  $('#EQA').click(function(){
        //if this.hide then set this.show
        //if this.show then set this.hide
        //class can be toggled by use of hasClass method
         //this.hasClass then remove else add
    });

Answer 6

See this fiddle。我认为代码几乎是不言自明的。

$(document).ready(function(){

    $(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();
            $("#EQAtbl").removeClass('shown');
        }
    });

    $('#EQA').click(function(){
        $(this).toggleClass('zui-sel-state-focus');
        if ($("#EQAtbl").hasClass('shown')){
            $('#EQAtbl').hide();
            $("#EQAtbl").removeClass('shown');
        }
        else{
            $('#EQAtbl').show();
            $("#EQAtbl").addClass('shown');
        }
    });

});

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

6 个答案: