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引导下拉列表

回答

相关问题