当 jQuery 添加其他 <li> 时，下拉菜单的宽度会发生变化
Posted
技术标签:
【中文标题】当 jQuery 添加其他 <li> 时，下拉菜单的宽度会发生变化【英文标题】：Dropdown-menu width changes when other <li> is added by jQuery 【发布时间】：2018-05-21 19:37:40 【问题描述】：代码：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script
src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"
integrity="sha256-eEa1kEtgK9ZL6h60VXwDsJ2rxYCwfxi40VZ9E0XwoEA="
crossorigin="anonymous"></script>
</head>
<body>
<div class="dropdown bigdiv">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu bigul">
<li>
<a href="#" id="open_input">open_input</a>
</li>
<ul class="list-group test">
</ul>
</ul>
</div>
</body>
<script>
$(document).ready(function ()
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"Fortran",
];
var ul_text = ' <li class="ui-widget">\n' +
'<form role="form" style="">\n' +
' <div class="input-group input-group-sm" style="">\n' +
' <input type="text" class="form-control" id="tags" placeholder="Enter email">\n' +
' </div>\n' +
' </form>\n' +
' </li>'
$('#open_input').click(function (e)
$('.bigul').append(ul_text)
$('#tags').autocomplete(
search: function(event, ui)
$('.test').empty();
,
source: availableTags,
messages:
noResults: '',
results: function()
).data('autocomplete')._renderItem = function(ul, item)
return $('<li class="list-group-item"></li>')
.data('item.autocomplete', item)
.append(item.value)
.appendTo($('.test'));
;
e.stopPropagation();
);
);
</script>
jsfiddle：http://jsfiddle.net/uMqyn/919/
在该代码上，当我单击#open_input 时，ul.dropdown-menu.bigul 的宽度从 160 像素变为 182 像素。如您所见，如果我单击#open_input，则会添加一些<li>。
即使我将style="100%" 赋予var ul_text 的所有元素，它也不起作用。
问题：
第一个问题：如何使宽度与初始状态相同？我希望它具有相同的宽度 - 160px。这是主要问题。
第二个问题：如果可能的话，我想关注<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example button 的宽度。换句话说，如果按钮的宽度是 20px，dropdown-menu 和其他跟随 <li> 的宽度也将是 20px 宽度。
但第一个问题对我来说是最重要的。第二个问题不如第一个重要。
【问题讨论】：
为什么每次点击都添加？把它隐藏起来，当你点击它就会显示出来不是更好吗？ @DaFois 我希望下拉菜单可以通过用户的选择进行更改。因此，如果用户想要带有输入栏的下拉菜单，可以通过单击 open_input。 也许用 CSS 吧？ 在我看来宽度并没有增加... 我不确定我是否理解了这个问题......现在我已经取消删除我的答案......如果你愿意，你可以投票...... tnx 【参考方案1】：简单的解决方案，在你的javascript中修改这一行：
<input type="text" class="form-control" id="tags" placeholder="Enter email">
到
<input type="text" class="form-control" id="tags" placeholder="Enter email" style="width:158px;">
您可以在这里查看：http://jsfiddle.net/6ybd6656/
【讨论】：
@H.fate 没问题。关于你的第二个问题，我真的没有明白。你到底想要什么？【参考方案2】：你可以使用.one方法：
$('#open_input').one('click', function(e)
$('.bigul').append(ul_text);
...
【讨论】：
以上是关于当 jQuery 添加其他 <li> 时，下拉菜单的宽度会发生变化的主要内容，如果未能解决你的问题，请参考以下文章