Jquery在外部和鏈接上點擊時切換表格

這可能是之前解決的，但我找不到確切的案例。我有這個按鈕，點擊後，切換一張桌子。但是，我也有一個處理器，用於在div外部單擊來關閉它。現在，當用戶點擊鏈接時，切換事件不再觸發。Jquery在外部和鏈接上點擊時切換表格

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

來源

2012-10-23 greener

你的小提琴是不完整的......這不包括任何JS或者div的問題。 – Colleen

我的壞，我的意思是表（'＃EQAtbl'），而不是div和小提琴更新 – greener

這裏的解決方案：

$(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-23 21:06:36

的第一件事就是..你已經設置了visibility：hidden的表..

.toggle()將顯示/隱藏股利。它贏得了」 t對visibility:hidden ;

.blur()只會對輸入元素有效。不會對任何影響楚先生

移動你的鼠標懸停代碼DOM已準備就緒裏面......而使用。對（）附上事件

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

來源

2012-10-23 20:54:43

我可能沒有保存我的小提琴的最新版本，我刪除了可見性：隱藏。問題仍然存在，但點擊錨點不會觸發 – greener

檢查我發佈的小提琴。似乎在那裏工作 –

剛剛嘗試過，點擊鏈接不會再次關閉表格。只能通過點擊外部。 – greener

你的意思是這樣的：yourJSFIDDLE？嘗試編輯你的css中的visibility: hidden

來源

2012-10-23 20:55:01 yosafatade

在你的例子中，表外點擊並沒有關閉它，這是我希望實現的。 – greener

我會說，不要使用切換隻是爲了simiplity jiquery提供它。定義你自己的切換功能總是更好，因爲有些時候（和你的情況一樣）我們希望切換到更多的人類邏輯方式。

$('#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-23 20:56:15 sayannayas

這是因爲你的邏輯矛盾。

在您的鼠標鬆開

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-23 21:01:17

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

});

來源

2012-10-23 21:06:28 EyalAr

Jquery在外部和鏈接上點擊時切換表格

回答

相關問題