jQuery顯示/隱藏焦點問題

在輸入文本字段下方顯示下拉菜單。當前配置爲在文本輸入字段失焦時隱藏此下拉菜單。問題是，用戶需要能夠點擊下拉本身來顯示另一個區域，但是在此過程中，下拉本身會在其他區域顯示之前隱藏。註釋掉Fiddle第15-17行以查看其他區域的正確顯示。jQuery顯示/隱藏焦點問題

 <!DOCTYPE html> 
     <html lang="en"> 
     <head> 
     <title>Dynamic show/hide</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script> 
      $(function() { 

       $(".addressFill").hide(); 
       $(".dropdown").hide(); 

       function showElem() { 
        $(".addressFill").show(); 
       } 

       $(".addresspicker").click(function() { 
        $("ul.dropdown").toggle(); 
       }); 

       // Problem starts here 
       $(".addresspicker").focusout(function() { 
        $(".dropdown").hide(); 
       }); 
       // ends 

       $("ul.dropdown").on("click", "li", showElem); 
      }); 
     </script> 
     <style> 
     .dropdown { margin-left: 0.5em; padding: 0.5em; background: #fff; position: absolute; z-index: 999; border-top: 1px solid #B9B9B9; border-left: 1px solid #B9B9B9; border-right: 1px solid #7D7D7D; border-bottom: 1px solid #7D7D7D; } 
     ul { list-style-type: none; } 
     .dropdown li { padding: 0.5em; } 
     .dropdown li:hover { background-color: #eee; } 
     .dropdown li a:hover { text-decoration: none; } 
     p.addressFill { float: right; } 
     </style> 
     </head> 
     <body> 
    <form> 
<fieldset> 
     <div class="section"> 
      <label class="FieldLabel">Address:<span class="required">*</span></label> 
      <div class="autofill"> 
     <input name="" maxlength="38" size="38" id="" type="text" title="addresspicker" class="addresspicker" /> 
     <ul class="dropdown"> 
      <li><a href="#">Item 1</a></li> 
      <li><a href="#">Item 2</a></li> 
      <li><a href="#">Item 3</a></li> 
      <li><a href="#">Item 4</a></li> 
     </ul> 
     </div> 
    </div> 
     <p class="addressFill"> Show/hide section </p> 
     </fieldset> 
     </form> 
     </body> 
     </html>

來源

2013-04-08 hotdiggity

我敢肯定有一個更好的辦法，但你可以嘗試利用setTimeout()具有延遲自動關閉菜單，當用戶用它做和/或之後給定的時間已經過去了，類似這樣的：

// stores the setTimeout result 
var timeOut; 

// closes the menu 
var closeMenu = function() { 
    $("ul.dropdown").hide(); 
}; 

// resets the timeout using the specified delay 
var resetTimeout = function(newDelay){ 
    if (timeOut > 0) { 
      clearTimeout(timeOut); 
     } 

     timeOut = setTimeout(function() { 
      closeMenu() 
     }, newDelay); 
}; 

$(function() { 
    // use to store timeout 
    var timeOut = null; 

    // ...removed unchanged code for readability 

    // Problem starts here 

    // reset timeout when focus is lost on input 
    $(".addresspicker").focusout(function() { 
     resetTimeout(1000); 
    }); 

    // reset the timeout when moving over or leaving the menu 
    $("ul.dropdown").on('mousemove mouseleave', function() { 
     resetTimeout(1000); 
    }) 
    // ends 

    // ...removed unchanged code for readability 
});

DEMO - 使用setTimeout()

這只是使用setTimeout()的衆多變體之一。您可以非常細緻地改進用戶體驗。
這可能是一種更有效的方法，可以一起完成整個過程。

來源

2013-04-08 07:46:19 Nope

對此答案+1。：D – 2013-04-08 07:48:16

你可以使用.stopPropagation();

jsfiddle - 文檔中基本上會點擊隱藏下拉，除非你點擊.addresspicker或.dropdown。

// Removed the focusout and added these... 
$(".addresspicker, .dropdown").click(function (e) { 
    e.stopPropagation(); 
}); 

$(document).click(function(e){ 
    $("ul.dropdown").hide(); 
});

來源

2013-04-08 08:09:10 Joonas

+1因爲這是一個工作解決方案。只是要記住，當使用'.stopPropagation（）;'時，任何綁定到'.addresspicker'或'.dropdown'的父項的單擊事件現在不會在點擊這些元素時被觸發。儘管在這種特定情況下，我懷疑這會導致任何問題，除非'div.autofill'，'div.section'或'form'在某個階段會分配一個點擊事件。 – Nope 2013-04-08 08:22:09

jQuery顯示/隱藏焦點問題

回答

相關問題