jQuery를 토글 기능이 코드의 토글 기능은 항상 그들을 숨기지 않습니다 클릭 할 때이 #menu 항목을 보여줍니다하지만 예상대로 작동하지 않는

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
    $(function(){ 
     $('div#menu div') 
     .bind('mouseover',function(event){ 
      popHelp(this); 
      }) 
     .bind('mouseout',function(event){ 
      clearHelp(); 
     }) 
     .toggle(
      function(event){$('#menu div a').not(this).css('opacity',1);$(event.target).css('opacity',0.4)}, 
      function(event){$(event.target).css('opacity',1)} 
      ) 
     $('div.item').not('#mainPage') 
     .hide() 
     $('#customerManagement').click(function(event){ 
       $('.item').hide('slow'); 
       $('#customerManagementCon').toggle('slow'); 
       return false; 
      }) 
     $('#userManagement').click(function(){ 
      $('.item').hide('slow'); 
      $('#userManagementCon').toggle('slow'); 
      return false; 
      }) 
     $('#storageManagement').click(function(){ 
      $('.item').hide('slow'); 
      $('#storageManagementCon').toggle('slow'); 
      return false; 
      }) 
     $('#searchManagement').click(function(){ 
      $('.item').hide('slow'); 
      $('#searchManagementCon').toggle('slow'); 
      return false; 
      }) 
     $('#signOff').click(function(){ 
      $('.item').hide('slow'); 
      $('#signOffCon').toggle('slow'); 
      return false; 
      }) 
    } 
    ); 

    function popHelp(ref){ 
     var text; 
     if(ref.id=="customerManagement") 
      text="click here for customer management"; 
     else if(ref.id=="userManagement") 
      text="click here for user management"; 
     else if(ref.id=="storageManagement") 
      text="click here for storage management"; 
     else if(ref.id=="searchManagement") 
      text="search management"; 
     else if(ref.id=="signOff") 
      text="click here to sign off"; 
     $('#helpConsole').append('<div class="help">'+text+'<div>'); 
     } 
    function clearHelp(){ 
     $('#helpConsole > div').remove(); 
    } 

    </script> 
    <style type="text/css" > 
     #helpConsole 
     { 
      background-color:Aqua; 
      margin-left:500px; 
      width:300px; 
      height:100px; 
      outline-width:medium; 
     } 
    </style> 
</head> 
<body> 
    <div id="menu"> 
    <table border="2"> 
     <thead> 
     <tr>        
      <th colspan="5">Welcome $Employee Name</th> 
     </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td><div id="customerManagement" class="menuItem"><a>Customer Management</a></div></td> 
       <td><div id="userManagement" class="menuItem"><a>User Management</a></div></td> 
       <td><div id="storageManagement" class="menuItem"><a>Storage Management</a></div></td> 
       <td><div id="searchManagement" class="menuItem"><a>Search Management</a></div></td> 
       <td><div id="signOff" class="menuItem"><a>Sign Off</a></div></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
<div id="helpConsole"><h3>help</h3></div> 
<div id="mainPage" class="item"><h1>Storage Service</h1></div> 
<div id="customerManagementCon" class="item"> 
    <h3>Customer Management</h3> 
    </div> 
    <div id="userManagementCon" class="item"> 
    <h3>User Management</h3> 
    </div> 
    <div id="storageManagementCon" class="item"> 
    <h3>Storage Management</h3> 
    </div> 
    <div id="searchManagementCon" class="item"> 
    <h3>Search Mangement</h3> 
    </div> 
    <div id="signOffCon" class="item"> 
    <h3>Sign Off</h3> 
    </div> 
<div id="menuItemCon" class="item">menuItem</div> 
</body>

예상대로 작동하지 않습니다.

출처

2010-03-22 Bunny Rabbit

동작/버그를 복제 할 작은 코드를 게시하십시오. 이것은 당신이 더 나은 대답을 얻을 것입니다. –

어떤 기능을 토글합니까? 당신이 원하는 정확한 행동은 무엇입니까? 단지 5 분 동안 방화범이 낀 채로 당신의 페이지를 보았는데, 잘못되어 보이는 것들이 있었고, 다른 것들은 잘 작동하는 것처럼 보이지만, 당신이 의도하지 않은 것을 어떻게 알 수 있습니까? –