在点击问题上显示隐藏 div答案

【问题标题】：Show Hide a div on click issues在点击问题上显示隐藏 div
【发布时间】：2014-01-14 16:06:33
【问题描述】：

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

1 - 在 Javascript 代码中，第一行是确保如果已经有一个菜单打开，它将在新菜单显示之前关闭。但是当添加这一行时，带有切换命令的第二行不再切换。它仅在您单击时显示 div，但在您再次单击时不会隐藏它。其余所有操作都可以正常工作，因为当单击显示它的图像以外的任何内容时，div 会隐藏

2 - IE 7 由于使用 :hover 导致 javascript 的第 2 行出现错误，并且根本不会显示菜单（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>

任何帮助将不胜感激。

【问题讨论】：

标签： jquery menu internet-explorer-7 toggle internet-explorer-6

【解决方案1】：

您可以尝试使用 .not()，应该更有效吗？

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

【讨论】：

你能解释一下效率提升吗？乍一看，它似乎会添加许多事件处理程序，而不仅仅是一个，这听起来不像是通过单个比较测试比一个事件处理程序提高效率。
不幸的是，这不起作用。虽然这部分代码没有损坏，但我更感兴趣的是 IE 7 不接受代码。
@chris - 是的，我的错误，在每个事件都必须一路冒泡之后手动委派似乎仍然不是很有效？

【解决方案2】：

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

【讨论】：

这正是它发生的原因 - 感谢一百万。我会告诉你我的进展情况。

【解决方案3】：

首先：

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

独立，因此不需要在该函数中-在我看来，每次单击图像时都会添加该处理程序。所以我会把它放在图像的点击处理程序之外。

第二，

section_actions_menu: function(event){    ...

具体说明：

onclick="section_actions_menu(event);"

together 等同于：

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

所以，我将删除 onclick=... 并更改为将标记与行为分开的特定 jQuery 处理程序（根本没有对元素的单击函数调用，它都在代码中）。

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

所以，我最终得到了这个脚本：

$(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();

使用你的课程

【讨论】：

嗨，马克-感谢您的回复。我看到了另一种方法，如果你想看，我会发布答案。也带走了 onclick= 。谢谢

【解决方案4】：

原来比我聪明得多的人也指出了这个方法：

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”类的元素。

【讨论】：