jquery鼠标点击问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.menu1{background:#308EF8}
</style>
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
$(".menu1").siblings().hide();
});</script>
</head><body>
<table width="900" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="260" height="600" valign="top" bgcolor="#FFE4E1"><table width="96%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr class="menu1">
            <td><div align="center">菜单１</div></td>
          </tr>
          <tr>
            <td bgcolor="#FFFFCA"><div align="center">选项a</div></td>
          </tr>
          <tr>
            <td bgcolor="#FFFFCA"><div align="center">选项b</div></td>
          </tr>
          <tr>
            <td bgcolor="#FFFFCA"><div align="center">选项c</div></td>
          </tr>
        </table></td>
        </tr>
      <tr>
        <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr class="menu1">
            <td><div align="center">菜单2</div></td>
          </tr>
          <tr>
            <td bgcolor="#FFFFCA"><div align="center">选项a</div></td>
          </tr>
          <tr>
            <td bgcolor="#FFFFCA"><div align="center">选项b</div></td>
          </tr>
          <tr>
            <td bgcolor="#FFFFCA"><div align="center">选项c</div></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr class="menu1">
            <td><div align="center">菜单3</div></td>
          </tr>
          <tr>
            <td bgcolor="#FFFFCA"><div align="center">选项a</div></td>
          </tr>
          <tr>
            <td bgcolor="#FFFFCA"><div align="center">选项b</div></td>
          </tr>
          <tr>
            <td bgcolor="#FFFFCA"><div align="center">选项c</div></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr class="menu1">
            <td><div align="center">菜单4</div></td>
          </tr>
          <tr>
            <td bgcolor="#FFFFCA"><div align="center">选项a</div></td>
          </tr>
          <tr>
            <td bgcolor="#FFFFCA"><div align="center">选项b</div></td>
          </tr>
          <tr>
            <td bgcolor="#FFFFCA"><div align="center">选项c</div></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td colspan="2">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2">&nbsp;</td>
      </tr>
      
      
    </table></td>
    <td>&nbsp;</td>
  </tr>
</table>
<script language="javascript">
$(".menu1").click(function(){
$(this).siblings().show();
$(".menu1"):not(this).siblings().hide();
});
</script>
</body>
</html>想通过点击菜单的方式显示下面的选项，其他菜单的选项则隐藏。$(document).ready　起作用了，一上来所有菜单的选项都隐藏着然而$(".menu1").click(function(){　无效，没有达到既定效果，点了没用

解决方案 »

  1.   

    $(".menu1").not(this).siblings().hide();
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>
    .menu1{background:#308EF8}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script language="javascript">
    $(document).ready(function(){
    $(".menu1").siblings().hide();
    $(".menu1").click(function(){
    $(this).siblings().show();
    $(".menu1").not(this).siblings().hide();
    });
    });
    </script>
    </head><body>
    <table width="900" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td width="260" height="600" valign="top" bgcolor="#FFE4E1"><table width="96%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
      <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr class="menu1">
      <td><div align="center">菜单１</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项a</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项b</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项c</div></td>
      </tr>
      </table></td>
      </tr>
      <tr>
      <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr class="menu1">
      <td><div align="center">菜单2</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项a</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项b</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项c</div></td>
      </tr>
      </table></td>
      </tr>
      <tr>
      <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr class="menu1">
      <td><div align="center">菜单3</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项a</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项b</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项c</div></td>
      </tr>
      </table></td>
      </tr>
      <tr>
      <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr class="menu1">
      <td><div align="center">菜单4</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项a</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项b</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项c</div></td>
      </tr>
      </table></td>
      </tr>
      <tr>
      <td colspan="2">&nbsp;</td>
      </tr>
      <tr>
      <td colspan="2">&nbsp;</td>
      </tr>
        
        
      </table></td>
      <td>&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
      

  2.   

    $(".menu1"):not(this).siblings().hide();
    这个就有问题了
      

  3.   

    $(".menu1"):not($(this)).siblings().hide();
    ($(".menu1"):not($(this))).siblings().hide();这两个都不行。当然我已经解决了
    <script language="javascript">
    $(".menu1").click(function(){
    $(".menu1").siblings().hide(); //先把所有菜单的选项都隐藏
    $(this).siblings().show();　　//然后单显示当前点击菜单的选项
    });
    </script>
    但我就是想知道怎么写过滤器能过滤掉被点击的那个元素自身？？？
      

  4.   

      if ( $(this).hasClass(".menu1") )
    做这样一个判断不行么
      

  5.   

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
       .menu1{background:#308EF8};
    </style>
    <script src="jquery-1.3.1.js" type="text/javascript"></script>
    <script language="javascript">
    $(document).ready(function(){
         $(".menu1").siblings().hide();
    });</script></head><body>
    <table width="900" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td width="260" height="600" valign="top" bgcolor="#FFE4E1"><table width="96%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
      <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr class="menu1">
      <td><div align="center">菜单１</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项a</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项b</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项c</div></td>
      </tr>
      </table></td>
      </tr>
      <tr>
      <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr class="menu1">
      <td><div align="center">菜单2</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项a</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项b</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项c</div></td>
      </tr>
      </table></td>
      </tr>
      <tr>
      <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr class="menu1">
      <td><div align="center">菜单3</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项a</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项b</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项c</div></td>
      </tr>
      </table></td>
      </tr>
      <tr>
      <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr class="menu1">
      <td><div align="center">菜单4</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项a</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项b</div></td>
      </tr>
      <tr>
      <td bgcolor="#FFFFCA"><div align="center">选项c</div></td>
      </tr>
      </table></td>
      </tr>
      <tr>
      <td colspan="2">&nbsp;</td>
      </tr>
      <tr>
      <td colspan="2">&nbsp;</td>
      </tr>
        
        
      </table></td>
      <td>&nbsp;</td>
      </tr>
    </table>
    <script language="javascript">
    $(".menu1").click(function(){
    $(this).siblings().show();
    $(".menu1").not($(this)).siblings().hide();});
    这个.not就是过滤其他东西的</script>
    </body>
    </html>
     
      

  6.   

    $(".menu1").click(function(){}
    你把$(this)放到里面的时候 $(this)就是$(".menu1")了
    $(this).siblings()是menu1同级的元素，你这么写意义何在？
    应该直接就写$(this).show();如果你要判断非$(this)的情况，这样结构需要改一下。
    给你要判断的元素加一个新的class 比如.mytr
    然后用$(".mytable").not($(".mytr")).hide();//