jquery hide right click menu after click on button

Question

I have a jquery script which on right click shows custom menu with buttons over text paragraphs. There are several menus which you can choose by pressing on on of tabs from the right side. Now how can I set up that on click of one of buttons in it, custom menu gets hided? I need some sort of behaviour on right click menu as is in the default one. When you click some option it gets hided.

You can see situation till now on: 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>

script:

    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");

What is simplest solution for that? you can edit my linked up jsfiddle freely.

Answer 1

You should add and event handler for click events on dropdown-menu panel buttons, like this:

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();
        });
})