在外部單擊時如何關閉元素？

Question

當我單擊按鈕時，按鈕會切換特定的類並打開某些內容，這可以工作，但是當我嘗試鍵入將在該對象之外單擊該對象時將其關閉的代碼時，該問題不起作用

 $(function() { $('button').on('click', function() { $('.list').toggle(); $('button').toggleClass('something'); }); $(document).on('click', function(e) { if (e.target !== 'list, button') { $('.list').hide(); } }); }); 

 .list { width: 100px; height: 150px; background: lightgray; display: none; } button { background: green } .something { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='list'></div> <button>button</button> 

Answer 1

那是因為您有一個display: none CSS聲明display: none 。 您可能還想向.list添加一些內容（以便可以將其隱藏），如以下示例所示：

 $(function() { $(document).on('click', function(e) { if (e.target !== 'list, button') { $('.list').hide(); } }); }); 

 .list { width: 100px; height: 150px; background: lightgray; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='list'>List</div> 

希望這可以幫助！ :)

Answer 2

試試這個代碼，在這里您將打開列表並在其上移動，但是當您在按鈕和列表之外單擊時，該列表將被隱藏：

 var change ="y"; $('button').on('click', function() { if(change == "y") { $(".list").show(); }}); $('button').on('blur', function() { if(change == "x") { $(".list").hide(); change="y";}}); $('.list').on('mouseover', function() { change="y";}); $('.list').on('mouseout', function() {change="x"; $('button').focus();}); 

 .list { width: 100px; height: 150px; background: lightgray; display: none; } button { background: green } .something { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div class='list'></div> <button>button</button>