个人中心
gpt4 book ai didi

javascript - 重新打开或关闭后重置下拉菜单详细信息

转载 作者：行者123 更新时间：2023-11-30 14:53:59 25 4
gpt4 key购买 nike

代码: 

<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",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "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 class="dropdown-menu bigul">
    <li>
        <a href="#" id="open_input">open_input</a>
    </li>

    <ul class="list-group test">
    </ul>
  </ul>

问题:我问下一个下拉菜单重新打开时，下拉菜单上的任何更改都看不到。我想让下拉菜单的初始状态保持不变。

我该怎么做？

最佳答案

编辑:我意识到我们不能使用 .focusout 因为单击下拉菜单的子元素(例如输入文本)将清除其 li.ui-widget< 的下拉菜单 children 。

解决方法是使用Bootstrap下拉关闭事件hide.bs.dropdown来检测我们是否关闭了菜单。 

$('.bigdiv').on('hide.bs.dropdown', function () {
    $('.bigul .ui-widget').remove()
    console.log('removing')
})

fiddle :http://jsfiddle.net/uMqyn/924/

灵感来自:https://stackoverflow.com/a/31444063/3891117

如果您使用的是 Bootstrap v2.3.2，请在同一链接中说明使用 click.dropdown.data-api 事件。

关于javascript - 重新打开或关闭后重置下拉菜单详细信息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47659021/

25 4 0
文章推荐： javascript - 通过 style 标签使用 JQuery 修改 html 内容
文章推荐： javascript - 使用 React Native 创建单例类
文章推荐： javascript - 错误类型错误 : Cannot read property 'toLowerCase' of undefined. Ionic 3
文章推荐： javascript样式特殊字符之间的所有单词
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com