Показать Скрыть div при проблемах с кликами

Question

У меня есть изображение с классом "actions_image", которое при нажатии показывает меню.Это изображение со скрытым меню появляется несколько раз на одной странице.У меня проблемы с кодом ниже по двум причинам:

1 - В коде Javascript первая строка должна гарантировать, что, если уже есть открытое меню, оно будет закрыто до показа нового меню,Но когда эта строка добавлена, вторая строка с командой переключения больше не переключается.Он показывает div только при нажатии, но не скрывает его при повторном нажатии.Все остальные действия работают отлично, так как в div скрывается, когда что-либо, кроме изображения, которое показывает его, нажимается

2 - IE 7 выдает ошибку для 2-й строки 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

Оказывается, кто-то намного умнее меня также указал на этот метод:

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

Я бы подумал, что причина, по которой виден только тумблер, в том, что линия перед вами скрывает все.Он не просто скрывает другие меню, он скрывает их все, поэтому при переключении вы переключаете что-то скрытое, чтобы сделать его видимым.Возможно, вы захотите отследить то, что отображается в данный момент (сохраните текущее видимое меню в переменной), а затем вы можете проверить, скрывается ли это или нет.

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, который отделяет разметку от поведения (вообще никакого вызова функции click для элемента, это все в коде).

Тогда мы можем обработать событие для клика.

ТАК, я получаю этот скрипт:

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

Вы можете попробовать использовать .not (), должно быть более эффективным?

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