javascript - Bootstrap sub menu doesn't close previous submenu when opening another -

i using bootstrap 3.1.1 , dropdowns - have built dropdown menu sub menus. each menu opens , closes on click problem if open sub menu , open sub menu first sub menu remains open. open sub menu close upon opening menu.

i using menu , submenu:

$(document).ready(function() {     $('.dropdown-toggle').dropdown();      $('.dropdown-submenu>a').unbind('click').click(function(e){         $(this).next('ul').toggle();         e.stoppropagation();         e.preventdefault();     }); }); 

and html:

<li class="dropdown" id="menu">     <a href="#" class="dropdown-toggle" data-toggle="dropdown">menu <b class="caret"></b></a>     <ul class="dropdown-menu">         <li><a href="/item1">item 1</a></li>         <li class="dropdown-submenu"><a href="#" data-toggle="dropdown">submenu 1</a>             <ul class="dropdown-menu">                 <li><a class="submenu-open" href="/subitem1">subitem 1</a></li>             </ul>         </li>     </ul> </li> 

how can make sub menus close on opening menu?

http://jsfiddle.net/ue7cw513/2/

i figured out - hid submenu ul on clicking new sub menu using:

    $('.dropdown-submenu>ul').hide(); 

so code is:

    $('.dropdown-submenu>a').unbind('click').click(function(e){         $('.dropdown-submenu>ul').hide();         $(this).next('ul').toggle();         e.stoppropagation();         e.preventdefault();     });