Question

如何在单击项目时删除或隐藏下拉子菜单。我们使用bootstrap for css.Please help me。这是代码。

<ul class="dropdown-menu" style="display: block; position: static;">
  <li class="dropdown-submenu active" id="xyz">
    <a href="#" id="family-1" class="family_type" style="display: block; color: rgb(73, 162, 20);">
      <label style="margin-right: 20px; width: 50px;"><img src="images/families/automotive_1.jpg"></label>Automotive
    </a>
    <ul class="dropdown-menu"> 
      <li class="family_id" id="1"><a style="cursor: pointer;" id="535" name="Fluid" class="masterTooltip">Fluid</a></li>
      <li class="family_id" id="1"><a style="cursor: pointer;" id="543" name="Power" class="masterTooltip">Power Fluid</a></li>                                                     
    </ul>
  </li>                            
  <li class="dropdown-submenu active" id="xyz">
    <a href="#" id="family-2" class="family_type">
      <label style="margin-right: 20px; width: 50px;"><img src="images/families/batteries.jpg"></label>Batteries
    </a>
    <ul class="dropdown-menu">
      <li class="family_id" id="2"><a style="cursor: pointer;" id="685" name="Batteries" class="masterTooltip">Batteries</a></li>
      <li class="family_id" id="2"><a style="cursor: pointer;" id="104" name="eries" class="masterTooltip">eries</a></li>   
    </ul>
  </li>
</ul>

这是我的css代码。

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#3EA861;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#3EA861;}
.dropdown-submenu{float:none;}.dropdown-submenu>.dropdown-menu{margin-right:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

请帮帮我。

Answer 1

DEMO：http://jsfiddle.net/3mrw4rzk/

$(document).ready(function(){
    $('.masterTooltip').on('click', function(){
        var $parent = $(this).parent().parent().parent();
        //console.log($parent);
        $parent.hide();
    });
});

您的代码存在1个问题，即您对不同的项目使用相同的ID，html中的ID应该是唯一的。

删除下拉子菜单onclick

1 个答案: