jquery - ボタンをクリックした後、jqueryは右クリックメニューを非表示にします

Question

右クリックすると、テキスト段落の上にボタンが付いたカスタムメニューが表示されるjqueryスクリプトがあります。右側のタブを押して選択できるメニューがいくつかあります。その中のボタンの1つをクリックすると、カスタムメニューが非表示になるように設定するにはどうすればよいですか? デフォルトのものと同様に、右クリックメニューに何らかの動作が必要です。オプションをクリックすると、非表示になります。

これまでの状況は、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を自由に編集できます。