jquery hide right menu menu После нажатия кнопки

Question

У меня есть сценарий jquery, который по правому клику показывает пользовательское меню с кнопками над текстовыми абзацами. Существует несколько меню, которые вы можете выбрать, нажав на вкладки с правой стороны. Теперь, как я могу настроить, что при нажатии одной из кнопок в нем пользовательское меню скрывается? Мне нужно какое-то поведение в меню правого щелчка, как в стандартном. Когда вы нажимаете какой-либо вариант, он скрывается.

Вы можете видеть ситуацию до сих пор на: http://jsfiddle.net/dzorz/8zRqc/

HTML:

<div id="tabs" class="pull-right">  
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#add-step1" data-toggle="tab">Step 1</a>  </li> 
     <li><a href="#add-step2" data-toggle="tab">Step 2</a></li> 
     <li><a href="#add-step3" data-toggle="tab">Step 3</a></li> 
     <li><a href="#add-step4" data-toggle="tab">Step 4</a></li> 
     <li class="finish"><a href="#finish" data-toggle="tab">Finish</a></li> 
    </ul> 
    <ul class="tab-content"> 
     <li class="tab-pane fade in active" id="add-step1"> 
      First 
     </li> 
     <li class="tab-pane fade in" id="add-step2"> 
      Second 
     </li> 
     <li class="tab-pane fade in" id="add-step3"> 
      Third 
     </li> 
     <li class="tab-pane fade in" id="add-step4"> 
      Fourth 
     </li> 
     <li class="tab-pane fade in" id="finish"> 
      Finish 
     </li> 
    </ul> 
</div> 


<div id="demo-container" class="demo-container pull-left"> 
Duis sed accumsan mi. Integer dapibus viverra sapien, vel tempor libero  
ornare vel. Maecenas sit amet urna pretium, hendrerit arcu non, 
fermentum erat. Aliquam leo massa, varius vel hendrerit a, tempus eget 
lacus. Aliquam non dui orci. 
</div> 

<div class='custom-menu1 dropdown-menu'> 
<button id="copy_1" class="btn btn-primary">Title 1</button> 
<button id="copy_2" class="btn btn-primary">Title 2</button> 
<br> 
<button id="copy_name1" class="btn btn-primary">Name</button> 
</div> 

<div class='custom-menu2 dropdown-menu'> 
<button id="copy_3" class="btn btn-primary">Title 3</button> 
<button id="copy_4" class="btn btn-primary">Title 4</button> 
<br> 
<button id="copy_name2" class="btn btn-primary">Name</button> 
</div> 

<div class='custom-menu3 dropdown-menu'> 
<button id="copy_5" class="btn btn-primary">Title 5</button> 
<button id="copy_6" class="btn btn-primary">Title 6</button> 
<br> 
<button id="copy_name3" class="btn btn-primary">Name</button> 
</div> 

<div class='custom-menu4 dropdown-menu'> 
<button id="copy_7" class="btn btn-primary">Title 7</button> 
<button id="copy_8" class="btn btn-primary">Title 8</button> 
<br> 
<button id="copy_name4" class="btn btn-primary">Name</button> 
</div>   
<div class='menu-finish dropdown-menu'> 
    <button id="copy_finish" class="btn btn-primary">finish</button> 
</div> 

сценарий:

function showMenu(menuClass) { 
    var menu = $(menuClass); 
    $('#demo-container').bind("contextmenu", function (event) { 
     event.preventDefault(); 
     menu.appendTo("body").css({ 
      top: event.pageY + "px", 
      left: event.pageX + "px" 
     }).show(); 
    }).bind("click", function (event) { 
     if (!$(event.target).is(menuClass)) { 
      menu.hide(); 
     } 
    }); 
} 

$('.nav a').on('click', function() { 
    $('#demo-container').unbind(); 
    $('.dropdown-menu').hide(); 
    if ($(this).parent().hasClass('finish')) { 
     showMenu(".menu-finish"); 
    } else { 
     var step = $(this).attr('href').substr(9); 
     showMenu(".custom-menu" + step); 
    } 
}); 

showMenu(".custom-menu1"); 

Что такое простое решение для этого? вы можете свободно редактировать мою связанную jsfiddle.

Answer 1

Вы должны добавить и обработчик событий для событий щелчка на кнопках панели выпадающего меню, например:

function showMenu(menuClass) { 
    var menu = $(menuClass); 
    $('#demo-container').bind("contextmenu", function (event) { 
     event.preventDefault(); 
     menu.appendTo("body").css({ 
      top: event.pageY + "px", 
      left: event.pageX + "px" 
     }).show(); 
    }) 
} 
$(document).ready(function(){ 
     var page = $(this); 
     page.on("click",'.dropdown-menu button', function (event){ 
      var button = $(this); 
      button.closest('.dropdown-menu').hide(); 
     }); 
})