顯示隱藏點擊問題

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

使用類