ul＆li如何處理同班同學的下拉菜單

Question

我在這里有兩個具有相同類名的下拉列表，它們是由列表組成的，每個列表都包含一個輸入字段，當您單擊輸入時，下拉列表按常規選擇下拉列表打開，但是當我選擇該下拉列表的任何選項時，其他下拉列表的值下拉菜單也會發生變化。 如何停止呢？ 請幫我 ....

 function DropDown(el) { this.dd = el; this.initEvents(); } DropDown.prototype = { initEvents: function() { var obj = this; obj.dd.on('click', function(event) { $(this).toggleClass('active'); event.stopPropagation(); }); } } $(function() { var dd = new DropDown($('.dd')); $(document).click(function() { // all dropdowns $('.wrapper-dropdown-5').removeClass('active'); }); }); $("li.item").click(function() { var li_val = $(this).text(); console.log(li_val); //console.log($($($(this).parent()).parent()).children()); //$($($($(this).parent()).parent()).children()[0]).val(li_val); //$(".inP").val(li_val); }); $(".add").click(function() { var inPPuT = $(".inP").val(); $(".live-search-list").prepend("<li class='item'><a href='#'><i class='icon-user'></i>" + inPPuT + "</a></li>"); $('.wrapper-dropdown-5').removeClass('active'); }); $(document).ready(function() { var wrapper = $('.live-search-list'); $(wrapper).on('click', '.item', function(e) { //Once remove button is clicked e.preventDefault(); var li_vl = $(this).text(); $(".inP ").val(li_vl); }); }); $('.live-search-list li.item').each(function() { $(this).attr('data-search-term', $(this).text().toLowerCase()); }); $('.live-search-box').on('keyup', function() { var searchTerm = $(this).val().toLowerCase(); $('.live-search-list li.item').each(function() { if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) { $(this).show(); } else { $(this).hide(); } }); }); 

 *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } ::selection { background: transparent; } ::-moz-selection { background: transparent; } .wrapper-demo { margin: 60px 0 0 0; *zoom: 1; font-weight: 400; } .wrapper-demo:after { clear: both; content: ""; display: table; } .wrapper-dropdown-5 { /* Size & position */ position: relative; width: 200px; margin: 0 auto; padding: 12px 15px; /* Styles */ background: #fff; border-radius: 5px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); cursor: pointer; outline: none; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .wrapper-dropdown-5:after { /* Little arrow */ content: ""; width: 0; height: 0; position: absolute; top: 50%; right: 15px; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #4cbeff transparent; } .wrapper-dropdown-5 .dropdown { /* Size & position */ position: absolute; top: 100%; left: 0; right: 0; /* Styles */ background: #fff; border-radius: 0 0 5px 5px; border: 1px solid rgba(0, 0, 0, 0.2); border-top: none; border-bottom: none; list-style: none; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; /* Hiding */ max-height: 0; overflow: hidden; } .wrapper-dropdown-5 .dropdown li { padding: 0 10px; } .wrapper-dropdown-5 .dropdown li a { display: block; text-decoration: none; color: #333; padding: 10px 0; transition: all 0.3s ease-out; border-bottom: 1px solid #e6e8ea; } .wrapper-dropdown-5 .dropdown li:last-of-type a { border: none; } .wrapper-dropdown-5 .dropdown li i { margin-right: 5px; color: inherit; vertical-align: middle; } /* Hover state */ .wrapper-dropdown-5 .dropdown li:hover a { color: #57a9d9; } /* Active state */ .wrapper-dropdown-5.active { border-radius: 5px 5px 0 0; background: #4cbeff; box-shadow: none; border-bottom: none; color: white; } .wrapper-dropdown-5.active:after { border-color: #82d1ff transparent; } .wrapper-dropdown-5.active .dropdown { border-bottom: 1px solid rgba(0, 0, 0, 0.2); max-height: 400px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper-dropdown-5 dd" tabindex="1"> <input class="inP live-search-box" type="text" name="items[]"> <ul class="dropdown live-search-list"> <li class="item"><a href="#"><i class="icon-user"></i>Profile</a></li> <li class="item"><a href="#"><i class="icon-cog"></i>Settings</a></li> <li class="item"><a href="#"><i class="icon-remove"></i>Log out</a></li> <li> <a href="#"> <button class="add_item" type="button">Add Item</button> </a> </li> </ul> </div> <div style="margin-top: 100px;" class="wrapper-dropdown-5 dd" tabindex="1"> <input class="inP live-search-box" type="text" name="items[]"> <ul class="dropdown live-search-list"> <li class="item"><a href="#"><i class="icon-user"></i>Profile</a></li> <li class="item"><a href="#"><i class="icon-cog"></i>Settings</a></li> <li class="item"><a href="#"><i class="icon-remove"></i>Log out</a></li> <li> <a href="#"> <button class="add_item" type="button">Add Item</button> </li> </ul> </div> 

Answer 1

您為下拉菜單使用了相同的類，因此無論您編寫的是哪種JavaScript都可用於兩個下拉菜單，請更改您的類名稱。

Answer 2

您必須在父div找到.inp 。
使用closest的目標div parent並在其中找到類名.inp

更改您的代碼

$(document).ready(function() {
  var wrapper = $('.live-search-list');
  $(wrapper).on('click', '.item', function(e) { //Once remove button is clicked
    e.preventDefault();
    var li_vl = $(this).text();
    $(".inP ").val(li_vl);
  });
});

至

 $(document).ready(function() {
  var wrapper = $('.live-search-list');
  $(wrapper).on('click', '.item', function(e) { //Once remove button is clicked
    e.preventDefault();
    var li_vl = $(this).text();
    $(this).closest("div").find(".inP ").val(li_vl); // find parent 1st
  });
});

Jsfiddle： https ://jsfiddle.net/synz/13tLhfhv/