刪除下拉子菜單onclick

Question

如何刪除或隱藏下拉菜單，當單擊項目。我們使用引導程序的css.Please幫助我。這裏是代碼。

<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應該是唯一的。