Question

我制作了一个自定义右键单击菜单，右键单击显示在div上方，名为“demo-container”。一切正常，但我需要一些更复杂的东西。确切地说，每次按不同的选项卡时，我都需要不同的自定义菜单显示在上面的演示容器中。因此默认行为并按下选项卡“步骤1”，它将显示“demo-container”上方的“custom-menu1”类菜单，按下“Step 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很吵，所以我不知道如何......

可以解决一些不同的问题吗？任何事情都是可以接受的

谢谢

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

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

相匹配

Example

根据按下的选项卡，Jquery不同的自定义“右键单击”菜单

1 个答案: