Bootstrap下拉菜单-显示所选项目最近的元素不起作用

Reddy 发表于 Dev

雷迪

我正在使用Bootstrap下拉列表并显示所选项目...

它按预期运行良好。但是我遇到了问题，如果我有多个下拉菜单。如果我要更改一项，则所有下拉列表都在更改...尽管我正在使用closestjQuery中的元素...

在线演示

jQuery的

jQuery('.th-icons-toggle .dropdown-menu li a').on('click', function() {
  var newIcon = jQuery(this).closest('li').find("a").html();
  jQuery('.dropdown_title').html(newIcon);
});

的HTML

<h4>Select 1</h4>
<ul class="list-inline th-icons-toggle">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown">
      <span class="dropdown_title"><i class="glyphicon glyphicon-cog"></i></span></a>
    <ul class="dropdown-menu">
      <li><a href="javascript:;"><i class="glyphicon glyphicon-cloud"></i></a></li>  
      <li><a href="javascript:;"><i class="glyphicon glyphicon-pencil"></i></a></li> 
    </ul>
  </li>
</ul>

<h4>Select 2</h4>
<ul class="list-inline th-icons-toggle">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown">
      <span class="dropdown_title"><i class="glyphicon glyphicon-cog"></i></span></a>
    <ul class="dropdown-menu">
      <li><a href="javascript:;"><i class="glyphicon glyphicon-cloud"></i></a></li>  
      <li><a href="javascript:;"><i class="glyphicon glyphicon-pencil"></i></a></li> 
    </ul>
  </li>
</ul>

好的

jQuery('.th-icons-toggle .dropdown-menu li a').on('click', function() {
  var newIcon = jQuery(this).closest('li').find("a").html();
  jQuery(this).parents('.dropdown').find('.dropdown_title').html(newIcon);
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。