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

单击按钮后，jquery隐藏右键菜单

1 个答案: