Question

我有一个使用hide和show控制的UL。问题是，当我点击level1时它会在它消失之前显示level2，我相信这是因为回发或其他东西。功能有效，但它不会像它一样。我需要能够切换列表中的项目以显示和隐藏它们。

     <script>
      $(function(){
          $('.level2').hide();
          $('.level3').hide();
          $('.level1').click(function () {
              $('.level2').show();
                return false;
              $('level2').click(function () {
                  $('.level3').show();
                    return false;
                  $(this).find('ul').slideToggle();
              });
          })
      }
)
  </script>

HTML：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    <title></title>
    <link href="styles/Menu.css" rel="stylesheet" />

        <script type="text/javascript">

            function openNewWin(url) {

                var x = window.open(url, 'mynewwin', 'toolbar=no,directories=no,location=no,menubar=no,left=0,top=0,resizable=no,status=no');

                x.focus();

            }



    </script>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css"/>

  <script>
      $(function(){
          $('.level2').hide();
          $('.level3').hide();
          $('.level1').click(function () {
              $('.level2').show();
                return false;
              $('level2').click(function () {
                  $('.level3').show();
                    return false;
                  $(this).find('ul').slideToggle();
              });
          })
      }
)
  </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="menu" class="MenuBar">
<asp:Menu ID="Menu1" runat="server" CssClass="mainmenu" StaticDisplayLevels="3" Target="_blank" StaticEnableDefaultPopOutImage="False" StaticSubMenuIndent="0px" >
      <LevelMenuItemStyles>
    <asp:MenuItemStyle CssClass="level1"/>
    <asp:MenuItemStyle CssClass="level2"/>
    <asp:MenuItemStyle CssClass="level3" />
    <asp:MenuItemStyle CssClass="level4" />

  </LevelMenuItemStyles>

    <StaticMenuItemStyle CssClass="staticItem" />
        </asp:Menu>

</div>

    </form>

</body>
</html>

Jquery .show在回发后再次隐藏

0 个答案: