Question

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

1 - 在Javascript代码中，第一行是确保如果已经打开了一个菜单，则在显示新菜单之前将关闭该菜单。但是当添加这一行时，带有toggle命令的第二行不再切换。它只会在您单击时显示div，但在您再次单击时不会隐藏它。所有其余的动作都完美无缺，就像在隐藏显示它的图像之外的任何内容时一样，

2 - IE 7因第二行javascript而引发错误，因为使用了：hover并且根本不会显示菜单（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

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

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

Answer 2

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

Answer 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);"

与...相同：

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

使用你的班级

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

显示在点击问题上隐藏div

4 个答案: