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

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

最初のことは..あなたは可視性を設定しました：テーブルに隠されています..

.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();
        }
    });
});​

フィドルをチェック

于 2012-10-23T20:54:43.117 に答える
0

あなたはこれを意味します：あなたのJSFIDDLE？visibility: hiddenあなたのcssであなたを編集してみてください

于 2012-10-23T20:55:01.677 に答える
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 に答える