JQuery различные пользовательские меню «щелкнуть правой кнопкой мыши» в соответствии с нажатой вкладкой

Question

Я создал пользовательское меню с щелчком правой кнопкой мыши над надзором «demo-container». Все работает, но мне нужно что-то более сложное. Точно мне нужно другое настраиваемое меню, чтобы отображать демонстрационный контейнер перед каждым нажатием другой вкладки. Таким образом, поведение по умолчанию и нажатие вкладки «Шаг 1» отобразит меню с классом «custom-menu1» над «демонстрационным контейнером», при нажатии вкладки «Шаг 2» оно отобразит меню с классом «custom-menu2», над «демонстрационным контейнером», при нажатии вкладки «Шаг 3» отобразится меню с классом «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