1

这可能以前已经解决了，但我找不到确切的情况。我有这个按钮，点击后可以切换表格。但是，我也有一个处理程序，用于在 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');
    });
});​
4

6 回答 6

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/

于 2012-10-23T21:01:17.327 回答
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/

于 2012-10-23T21:06:36.657 回答
0

第一件事是..你已经设置了可见性：隐藏到表中..

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

.blur() 仅适用于输入元素..对锚点没有任何影响

在 DOM Ready 中移动 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();
        }
    });
});​

检查小提琴

于 2012-10-23T20:54:43.117 回答
0

你的意思是：你的JSFIDDLE？尝试visibility: hidden在你的 CSS中编辑你的

于 2012-10-23T20:55:01.677 回答
0

我想说，不要仅仅为了简单而使用切换 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
    });
于 2012-10-23T20:56:15.830 回答
0

看到这个小提琴。我认为代码几乎是不言自明的。

$(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');
        }
    });

});​
于 2012-10-23T21:06:28.247 回答