Question

我想在点击时添加一个菜单。有很多结果（class =＆＃34; working_btn＆＃34;），我希望能够点击任何结果并附加此菜单。我添加了计数器以便它只显示一次菜单，但问题是如果有人想点击另一个.worked_btn类，它将不会显示菜单，因为计数器不再是0。

那么你怎么只追加一次东西呢？我也曾尝试过追加，前言等等，但仍然没有运气。那么如何在.worked_btn类元素之后添加这个新的ul元素。

jQuery(document).ready(function() {
counter = 0; // used to make sure it only shows once
$('.worked_btn').click(function(){
    if(counter < 1) {
        $(this).append('<ul class="worked_menu"><li class="menu_send">Send Email</li><li class="menu_worked">Set as Worked</li><li class="menu_not">Set as Not Worked</li></ul>');
        counter++;
    }
});
});

UPDATE 我们也希望能够隐藏菜单，并且能够再次显示它。像切换一样。

Answer 1

<强> jsFiddle Demo

只需使用数据属性标志即可。这将允许您将菜单附加到尚未单击的任何working_btn元素，同时防止已生成菜单的任何working_btn元素被单击。为了确定单击哪个以及要删除哪个菜单，此状态需要一些管理，如图所示。

jQuery(document).ready(function() {
 $('.worked_btn').click(function(){
  if($(this).data('wasclicked')==undefined) {
   $('.worked_menu').parent().removeData('wasclicked');
   $('.worked_menu').remove();
   $(this).append('<ul class="worked_menu"><li class="menu_send">Send Email</li><li class="menu_worked">Set as Worked</li><li class="menu_not">Set as Not Worked</li></ul>')
     .data('wasclicked',true);
  }else{
   $(this).removeData('wasclicked');
   $('.worked_menu').remove();   
  }
 });
});

Answer 2

您可以尝试添加一个新类来指示它是否已被点击，而不是计数器。

$('.worked_btn').click(function(){
    if(!$(this).hasClass('selected')) {
        $('.worked_btn').removeClass('selected');
        $('ul.worked_menu').remove();
        $(this).addClass('selected');
        $(this).append('<ul class="worked_menu"><li class="menu_send">Send Email</li><li class="menu_worked">Set as Worked</li><li class="menu_not">Set as Not Worked</li></ul>');
    }
});

并清除已显示的菜单：

$('ul.worked_menu').remove();

编辑：要删除文档中任意位置的任何位置，只需将文档绑定到事件处理程序：

$(document).click(function (event){
  if (!$(event.target).hasClass('worked_btn')) {
      $('.worked_btn').removeClass('selected');
      $('ul.worked_menu').remove();
  }
});

http://jsfiddle.net/bPUWZ/

Answer 3

如果将菜单设置为变量，则可以重复使用菜单对象。

此外，由于附加不会复制，但实际上会将对象移动到它的新位置。这应该完全符合你的需要。

jQuery( function($) {
    var menu = $('<ul class="worked_menu"><li class="menu_send">Send Email</li><li class="menu_worked">Set as Worked</li><li class="menu_not">Set as Not Worked</li></ul>');
    $('.worked_btn').click( function() {
        $(this).append(menu);
    }
});

仅附加一个元素一次

3 个答案: