当 jQuery 添加其他 <li> 时，下拉菜单的宽度会发生变化答案

【问题标题】：Dropdown-menu width changes when other <li> is added by jQuery当 jQuery 添加其他 <li> 时，下拉菜单的宽度会发生变化
【发布时间】：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

标签： jquery html css twitter-bootstrap drop-down-menu

【解决方案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);
 ...

【讨论】：