显示隐藏点击问题

Question

我有一个“actions_image”类的图像，当点击时显示一个菜单。带隐藏菜单的图像会在同一页面上出现多次。 我有2个原因与下面的代码问题：

1 - JavaScript代码，第一行是要确保，如果有已经是一个菜单打开，这将显示的新菜单前关闭。但是，当添加这条线时，带有切换命令的第二行不再切换。它只在点击时显示div，但在再次点击时不会隐藏它。所有其他的行动完美地工作，因为在div隐藏时，除了图像显示它被点击的任何东西

2 - IE 7抛出一个JavaScript的第二行错误，因为使用：悬停并且根本不会显示菜单（grrr ...！）

任何人都可以帮忙吗？

Javascript代码：

section_actions_menu: function(event){ 
    $(".actions_image").next().hide(); 
    $(".actions_image:hover").next().toggle(); 
    $("body").click(function(e){ 
     if(e.target.className !== "actions_image") 
     { 
      $(".actions_image").next().hide(); 
     }  
    });        

}

HTML代码：

<img src="/media/images/spacer.gif" width="31" height="18" alt="Section Actions Menu" title="Section Actions Menu" class="actions_image" onclick="section_actions_menu(event);"/> 
<div class="toggle"> 
    <ul> 
     <li><a title="Add">Add</a></li> 
     <li><a title="Edit">Edit</a></li> 
     <li><a title="Remove">Remove</a></li> 
    </ul> 
</div> 

任何帮助将非常感激。

Answer 1

它原来有人要聪明得多比我还指出，这种方法：

section_actions_menu: function() { 

    var action_menu = $(".actions_image"); 
    action_menu.live('click', function(e) { 
     var other_action_menus = $(".actions_image").not($(this)); 
     other_action_menus.next().hide(); 
     $(this).next().toggle(); 

}); 

，并与其一起：

$("body").click(function(e) { //hides menu when clicking outside the menu 
    if(e.target.className !== "actions_image") { 
    $(".actions_image").next().hide(); 
    } 
}); 

...它允许显示和隐藏菜单当您单击与元素类“.actions_image”隐藏菜单，当你点击“.actions_image”之外，并隐藏其他菜单，当你点击另一个类为“.actions_menu”的元素时，可能会显示其他菜单。

Answer 2

你可以尝试使用.not（），应该更有效吗？

$('body').children().not('.actions_image').click(function(){.... 

Answer 3

我会认为切换只显示的原因是因为你之前的行隐藏了一切。它不仅隐藏了其他菜单，它隐藏了所有菜单，所以当您切换时，您正在切换隐藏的内容以使其可见。您可能想要跟踪当前显示的内容（将当前可见的菜单存储在变量中），然后您可以检查是否应该隐藏它。

Answer 4

第一关：

$("body").click(function(e){ 
     if(e.target.className !== "actions_image") 
     { 
      $(".actions_image").next().hide(); 
     }  
    }); 

是独立的，所以并不需要在这个函数 - 这在我看来，你点击图片每次添加一个处理程序。所以我会把它放在图像的点击处理程序之外。

其次，

section_actions_menu: function(event){ ... 

与具体：

onclick="section_actions_menu(event);" 

在一起是一样的：

$('.actions_image').click(function(e){ 
}); 

SO，我会删除的onclick = ...和变化到特定的jQuery处理程序，它将标记与行为分开（根本不需要在元素上单击函数调用，它全部在c颂）。

然后我们可以处理点击事件。

SO，我结束了这个脚本：

$(document).ready(function() 
{ 
    $("body").click(function(e) 
    { 
     if (e.target.className !== "actions_image") 
     { 
     $(".actions_image").next().hide(); 
     }; 
    }); 
    $('.actions_image').click(function(e) 
    { 
     if (e.target.next().is(':visible')) 
     { 
     $(".actions_image").next().hide(); 
     } 
     else 
     { 
      $(".actions_image").next().hide(); //hides all menus if any showing 
      e.target.next().show();//shows this specific one. 
     }; 
    }); 
}); 

注： 这样的：

$(".actions_image").next().hide(); 

也可能是：

$(".actions_image").next('.toggle').hide(); 

使用类