JQuery右键单击contextmenu

时间:2011-07-05 05:30:10

标签: javascript jquery

您好我是JQuery的新手,我只想拥有一个右键单击上下文菜单。我用Google搜索并找到了示例代码

这是我正在使用的代码。

  $(document).ready(function(){
    $('#rightclickarea').bind('contextmenu',function(e){
    var $cmenu = $(this).next();

    $('<div class="overlay"></div>').css({left : '0px', top : '0px',position: 'absolute', width: '100%', height: '100%', zIndex: '100' }).click(function() {
        $(this).remove();
        $cmenu.hide();
    }).bind('contextmenu' , function(){
        return false;}).appendTo(document.body);
    $(this).next().css({ left: getLeftPosition(e), top: getTopPosition(e), zIndex: '101' }).show();

    return false;

     });

     $('.vmenu .first_li').live('click',function() {
        if( $(this).children().size() == 1 ) {
            //alert($(this).children().text());
            $('.vmenu').hide();
            $('.overlay').hide();
        }
     });

     $('.vmenu .inner_li span').live('click',function() {
            //alert($(this).text());
            $('.vmenu').hide();
            $('.overlay').hide();
     });


    $(".first_li , .sec_li, .inner_li span").hover(function () {
        $(this).css({backgroundColor : '#E0EDFE' , cursor : 'pointer'});
    if ( $(this).children().size() >0 )
            $(this).find('.inner_li').hide();   
            $(this).css({cursor : 'default'});
    }, 
    function () {
        $(this).css('background-color' , '#fff' );
        $(this).find('.inner_li').hide();
    });        

});

我的问题是当我点击右键时,一切正常。但当我再次右键单击时,没有任何内容出现。如果想要再次出现菜单,我应该再做一次中间左击并再次右击。 任何人都可以帮助解决这个问题

提前致谢

1 个答案:

答案 0 :(得分:0)

(你可以将你的代码上传到jsfiddle.net吗?所以我们可以帮助你更好)

无论如何,我的建议是使用这个插件来做上下文菜单:
http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/

希望这会有所帮助。干杯