0

我有一个 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。

4

1 回答 1

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();
        });
})
于 2013-06-14T08:19:47.897 回答