jquery引導下拉列表

我有一個表單，我試圖使用下拉列表作爲消息顯示器。當我把注意力集中在輸入上時，顯示下拉菜單。問題是它在顯示後立即關閉。jquery引導下拉列表

<form method="post"> 
    <input id="name" type="text" name="name"> 
    <li class="dropdown list-unstyled"> 
     <a class="dropdown-toggle" role="button"data-toggle="dropdown"></a> 
     <ul class="dropdown-menu"> 
      My message. 
     </ul> 
    </li> 
</form>

jQuery的

$(document).ready(function(){ 
    $('#name').focusout(function() { 
     $('.dropdown-toggle').dropdown('toggle'); 
    }); 
});

我無法弄清楚它爲什麼還沒有關閉。奇怪的是，如果我在外面點擊並在釋放之前稍微拖動鼠標，則下拉不會關閉。謝謝！

小提琴https://jsfiddle.net/syp7ynqm/

編輯：這個問題似乎是，下拉檢測外點擊它顯示之後，所以它關閉（因爲它應該），但我想禁用此功能，只爲這首單擊，以便在焦點上消息將正確顯示。

來源

2016-01-21 alfix

你可以去用show方法。 Fiddle。

$(document).ready(function(){ 
    $('#name').focusout(function() { 
     $('.dropdown-menu').show(); 
    }); 
});

，並將HTML應該像下面的，因爲李應該是UL的孩子，所以你會想要去與folling HTML。

<form method="post"> 
    <input id="name" type="text" name="name"> 
    <div class="dropdown"> 
     <div class="dropdown-menu"> 
      My message. 
     </div> 
    </div> 
</form>

來源

2016-01-21 21:11:13

您不使用引導功能，我想使用它，因爲我不需要添加任何CSS。這是最接近的答案，但如果我沒有得到任何其他答案，我會選擇這個答案。謝謝！ – alfix

好吧，它基本上與使用引導程序相同，但我編輯了我的答案以充分使用引導程序。此外，我已經編輯了你的html，只是爲了使它正確，因爲李應該是一個UL的孩子，不應該超出UL元素，只是爲了使其成爲一個正確的標記。但我包括並更新了小提琴，所以再次檢查小提琴，你應該很好去。 –

$(document).ready(function(){ 
 
    $('#name').focusout(function() { 
 
     $('.dropdown-menu').toggle(); 
 
    }); 
 
    $(document).mousedown(function(){ 
 
    \t $('.dropdown-menu').hide(); 
 
    }) 
 
    
 
});

來源

2016-01-21 19:45:43 saikumar

同樣的問題https://jsfiddle.net/syp7ynqm/8/ – alfix

其實不一樣的問題，我很抱歉。這個問題是，它不會關閉，除非我在輸入內部單擊，然後再次單擊外部。 – alfix

已更新的代碼現在檢查 – saikumar

相反的下拉方法使用切換顯示或隱藏下拉的。

$(document).ready(function(){ 
$('#name').focusin(function(){ 
      $('.dropdown-menu').toggle(); 
}); 
$('#name').focusout(function(){ 
      $('.dropdown-menu').toggle(); 
}); 
});

這會導致下拉菜單顯示出來，當您輸入焦點並且點擊時消失。

檢查此琴：https://jsfiddle.net/e59xb38p/40/

來源

2016-01-21 19:53:21 stark

問題是，我想在顯示時重點顯示消息。看到這個小提琴回答saikumaru，使用切換。還是行不通。 jsfiddle.net/syp7ynqm/8我還編輯了添加更多信息的問題 – alfix

所以，當用戶沒有專注於#name框時，你想顯示消息嗎？嘗試超時顯示下拉焦點。 – stark

$(document).ready(function(){ 

    var $dropDownMenu = $('.dropdown-menu'); 
    // displays as default 
    $dropDownMenu.css("display", "block"); 

    $('#name') 
    .focusin(function() { 
     $dropDownMenu.css("display", "none"); 
    }) 
    .focusout(function() { 
     $dropDownMenu.css("display", "block"); 
    }); 
});

來源

2016-01-21 19:54:26 Leonardo

jquery引導下拉列表

回答

相關問題