リセット]ドロップダウンメニューの詳細を後に再オープンまたはそれを閉じ

CODE：リセット]ドロップダウンメニューの詳細を後に再オープンまたはそれを閉じ

<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>

質問：私は、任意の上のものを変更することを尋ねます次のドロップダウンが再び開いたときにドロップダウンメニューが表示されません。私はドロップダウンメニューの初期状態を変更しないままにしたい。

どうすればいいですか？

出典

2017-12-05 H.fate

編集：.focusoutを使用できないことに気付きました。ドロップダウンメニューの子要素（例：入力テキスト）をクリックすると、子どものli.ui-widgetのドロップダウンメニューが消去されるためです。

解決策は、ブートストラップドロップダウンクローズイベントhide.bs.dropdownを使用して、メニューを閉じたかどうかを検出することです。

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

フィドル：http://jsfiddle.net/uMqyn/924/

からアイデアを得た：あなたは同じリンクで、ブートストラップv2.3.2を使用している場合https://stackoverflow.com/a/31444063/3891117

click.dropdown.data-apiイベントを使用することを言います。

出典

2017-12-05 17:26:20

ありがとうL. J.それは私のためにうまくいきます。 –

リセット]ドロップダウンメニューの詳細を後に再オープンまたはそれを閉じ

答えて

関連する問題