Question

我试图创建一个上下文菜单来编辑和删除列表中的项目。如下。

HTML

<div class="row">
        <div id="capa1" class="col-md-4 col-md-offset-4">
            <p> Div 1</p>
        </div>
    </div>

    <div class="row">
        <div id="capa2" class="col-md-4 col-md-offset-4">
            <p> Div 2</p>
        </div>
    </div>

    <div class="row">
        <div id="capa3" class="col-md-4 col-md-offset-4">
            <p> Div 3</p>
        </div>
    </div>

这是上下文菜单

    <ul id="menuCapa" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 


    <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#" onClick="restauraCapa();">Restaurar</a>
    </li> 
    <li role="presentation" class="divider"></li>
    <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#" onClick="eliminaCapa();">Eliminar</a>
    </li>

</ul>

脚本

    <script>


    //cierra cuando abandona el elemento
    $(document).mouseleave(function(){
         $("#menuCapa").hide('fast');
    });

    //cierra cuando se presiona esc
    $(document).keydown(function(){
         $("#menuCapa").hide('fast');
    });



    //muestra el menu
    $("#capa1").mousedown(function(e) { 
    if (e.button == 2){            
    $("#menuCapa").css("top", e.pageY - 20);
    $("#menuCapa").css("left", e.pageX - 20);
    $("#menuCapa").show('fast');    
    }
    });




    //cierra el menu por defecto
    $(document).bind("contextmenu", function(e){ 
    return false;
    });



</script>

菜单可以工作但是对于一个id，因为div我通过一个foreach循环用php生成它们就是说它们是动态的我需要知道哪个是id给了一个点击才能通过它的功能，我希望我已经解释得很好，事先谢谢你。

Answer 1

给他们每个人同一个班级

然后

$(".capa_class").mousedown(function(e) { 
    if (e.button == 2){            
      $(this).css("top", e.pageY - 20);
      $(this).css("left", e.pageX - 20);
      $(this).show('fast');    
    }
});

所以诀窍是使用一个类，而不是一个id，并使用$（this）对clicked / mouseleave / keydown元素做任何你想做的事。

菜单上下文

1 个答案: