保持下拉可見的，而輸入框都集中

我的導航欄有下拉「字段集」的登錄和搜索這樣的：保持下拉可見的，而輸入框都集中

<div class="nav-button" id="nav-box"> 
     <a class="inside-link"> 
      <span id="inside-text">Sign in</span> 
     </a> 
     <fieldset id="menu-box" class="menu-box"> 
      <form method="post" id="forms" class="forms" action="checklogin.php"> 
       <label for="username">Username or email</label> 
       <input type="text" id="username" name="username" value="" title="username" tabindex="4"> 

       <label for="password">Password</label> 
       <input type="password" id="password" name="password" value="" title="password" tabindex="5"> 

       <input type="submit" id="small-btn" value="Sign in" tabindex="6"> 
       <input type="checkbox" id="remember" name="remember_me" value="1" tabindex="7"> 
       <label for="remember">Remember me</label> 
       <br /> 
       <a href="#"id="resend_password_link">Forgot your password?</a> 
       <a id='forgot_username_link' title="If you remember your password, try logging in with your email" href="#">Forgot your username?</a> 
      </form> 
     </fieldset> 
    </div>

我這裏有一個小提琴：http://jsfiddle.net/WBrns/5/

雖然輸入框，如「搜索」關注「用戶名」和「密碼」，我希望關聯的下拉列表不會消失，因此用戶在鍵入時不必將鼠標放在下拉列表中。

在CSS 288線是我們第一次這顯然是行不通的嘗試。我的網站已經包括jQuery的，所以任何的js/jQuery的解決方案是可以接受的（因爲我認爲這是不可能的，純CSS）

謝謝！

來源

2013-03-19 Go4the1

你可以在'focusin'添加監聽器和'focusout'的輸入，以去除（的focusIn）或再追加（事件的內容）的CSS允許您隱藏菜單的類。 – MatRt 2013-03-19 23:19:29

在您hover風格，確保屬性具有!important命令，然後使用下面的代碼，同時記得要替代的id和類，你需要的東西：

$("input").focus(function() { that=this; 
    $(this).parent(".drop").css("display", "block"); 

    $(this).blur(function() { 
     $(that).parent(".drop").css("display", "none"); 
    }); 
})

你可以看看的例如這裏：http://jsfiddle.net/WBrns/12/

如果用戶開始輸入，下拉不應該，即使他們把他們的鼠標離開消失。但是，如果他們點擊下拉以外，它將被隱藏。

來源

2013-03-19 23:41:49 Shaz

很棒。謝謝！ – Go4the1 2013-03-20 05:46:15

爲了提高在Shaz的回答，您可以命名的模糊事件以防止連接到同一輸入多模糊事件。我還建議使用類名和CSS來顯示和隱藏下拉列表，以便您可以利用CSS轉換。

$('input').focus(function() { 
    var $this = $(this); 
    var $drop = $this.parents('.drop'); 

    $drop.addClass('open'); 
    $this.bind('blur.closeDrop', function() { 
    $drop.removeClass('open'); 
    $this.unbind('blur.closeDrop'); 
    }); 
});

CSS

.drop { 
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.2s ease; 
} 
.drop.open { 
    opacity: 1; 
    pointer-events: auto; 
}

來源

2017-06-08 15:00:50

保持下拉可見的，而輸入框都集中

回答

相關問題