0

我制作了一个自定义右键菜单，在右键单击时显示，位于名为“demo-container”的 div 上方。一切正常，但我需要更复杂的东西。每次按不同的选项卡时，我需要不同的自定义菜单显示在演示容器上方。因此，默认行为和按下选项卡“步骤 1”时，它会在“演示容器”上方显示类“custom-menu1”的菜单，按下选项卡“步骤 2”时，它将显示类“custom-menu2”的菜单在“demo-container”上方，按下选项卡“Step 3”时，它将显示“demo-container”上方类“custom-menu3”的菜单......等等。

我用 .click 尝试了一些东西，但我失败了。

您可以在我的 jsfiddle 中使用该自定义右键单击菜单查看和编辑示例：http: //jsfiddle.net/dzorz/dfCkR/

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>
    </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>
     </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-menu 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 5</button>
<button id="copy_8" class="btn btn-primary">Title 6</button>
<br>
<button id="copy_name4" class="btn btn-primary">Name</button>
</div>

脚本：

    //1st rightclick menu
$('#demo-container').bind("contextmenu", function (event) {
    event.preventDefault();
    $("div.custom-menu").show();
    $(".custom-menu").appendTo("body").css({
        top: event.pageY + "px",
        left: event.pageX + "px"
    });
}).bind("click", function (event) {
    if (!$(event.target).is(".custom-menu")) {
        $("div.custom-menu").hide();
    }
});

CSS：

    .custom-menu {
z-index:1000;
position: absolute;
padding: 2px;
}
.custom-menu > .btn {
margin: 2px 0px 2px 0px!important;
}

#demo-container{
width:250px;   
}

这样的事情可能吗？请帮助我，因为我迷路了，我试图以多种方式解决它，但我对 jQuery 不熟悉，所以我不知道如何......

它可以解决一些不同的问题吗？什么都可以接受

谢谢

4

1 回答 1

1

如果您将 jquery 更改为以下内容，则应应用正确的右键单击：

function showMenu(step) {
    var menu = $("div.custom-menu" + step);
    $('#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(".custom-menu" + step)) {
            menu.hide();
        }
    });
}

$('.nav a').on('click', function() {
    $('.dropdown-menu').hide();
    var step = $(this).attr('href').substr(9);
    showMenu(step);
});

showMenu(1);

请注意，自定义菜单类别编号必须与步骤编号匹配

例子

于 2013-06-12T11:49:43.180 回答