Question

我想使用点击事件而不是悬停事件使用jquery构建一个下拉菜单。我在编码方面的工作是否适当有任何其他简短的方法来执行多级下拉菜单

  var initMenu = {
    show: function() {
      $('#left_dropbar ul ul').hide();
      $('#left_dropbar ul:first').show();
      $('#left_dropbar li a').click(function() {
        var checkClick = $(this);
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
          var ulCheck = checkClick.parent();
          ulCheck.find('ul').slideUp('normal');
          return false;
        }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
          checkElement.slideDown('normal');
          return false;
        }
      });
    }
  }

  $(document).ready(function() {
    initMenu.show();
  });

    /** css **/
    body {
      font: 12px/17px Arial, Tahoma, Sans-serif;
    }
    #left_dropbar {
      margin: 0;
      padding: 0;
    }
    #left_block .headerbar {
      background: url("arrowstop.gif") no-repeat scroll 8px 6px #606060;
      color: #FFF;
      font: bold 13px Verdana;
      margin-bottom: 0;
      text-transform: uppercase;
      padding: 7px 0 7px 10px;
    }
    #left_dropbar li {
      list-style: none;
      padding: 3px 0;
    }
    #left_dropbar li a {
      text-decoration: none;
    }
    #left_block {
      background: none;
      float: left;
      width: 225px;
    }
    #firstlevel {
      list-style-type: none;
      margin: 0 !important;
      padding: 0;
    }
    #firstlevel a {
      background: none repeat scroll 0 0 #E9E9E9;
      color: #000;
      display: block;
      text-decoration: none;
      padding: 5px 0 5px 8px;
    }
    ul li {
      list-style-type: none;
    }
    #left_dropbar ul {
      margin-left: 10px;
    }
    ul,
    li {
      margin: 0;
      padding: 0;
    }

<!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>
  <title>New Document</title>
  <meta name="Generator" content="EditPlus" />
  <meta name="Author" content="" />
  <meta name="Keywords" content="" />
  <meta name="Description" content="" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/left.js"></script>
  <link rel="stylesheet" type="text/css" href="css/left.css" />
</head>

<body>

  <div id="left_block">
    <div class="headerbar">Search</div>
    <div id="left_dropbar" class="left_content">


      <!-- First level menu start here -->
      <ul id="firstlevel">
        <li><a href="#">Overview</a>
          <!-- Sub level 1 menu start here -->
          <ul class="subfirstlevel">
            <li><a href="#">Guidelines</a>
            </li>
            <li><a href="#">Visual Specifications</a>
            </li>
            <li><a href="#">Interactions</a>
            </li>
          </ul>
          <!-- Sub level 1 menu end here -->
        </li>
        <li><a href="#">Table of Content</a>
        </li>
        <li><a href="#">Layout</a>
        </li>
        <li><a href="#">Required Screen Elements</a>
        </li>
        <li><a href="#">Layout</a>
        </li>
        <li><a href="#">Controls</a>
          <!-- Controls Sub level 1 menu start here -->
          <ul class="subfirstlevel">
            <li><a href="#">Buttons</a>
              <!-- Controls Sub level 2 menu start here -->
              <ul>
                <li><a href="#">Guidelines</a>
                </li>
                <li><a href="#">Visual Specifications</a>
                </li>
                <li><a href="#">Interactions</a>
                </li>
              </ul>
              <!-- Controls Sub level 2 menu end here -->
            </li>
            <li><a href="#">CheckBoxes</a>
            </li>
            <li><a href="#">Combo Boxes</a>
            </li>

          </ul>
          <!-- Controls Sub level 1 menu end here -->
        </li>


      </ul>
      <!-- First level menu end here -->

    </div>
  </div>
</body>

</html>

Answer 1

您所拥有的代码仅在第一个链接/子菜单上为我工作。我会添加

#left_dropbar ul ul{display: none;}

到你的css并简化你的javascript到

function expandMenu(e){
    var sublist = $(e.target).next("ul");      
    if(sublist.length != 0){
        if(sublist.is(":visible")){
            sublist.slideUp('normal');
        }
        else{
            sublist.slideDown('normal');
        }
    }
    return false;    
}
$(document).ready(function () {
    $('#left_dropbar ul:first').show();
    $('#left_dropbar li a').click(expandMenu);
});

请参阅this小提琴。

Jquery - 多级下拉菜单（“垂直”）

1 个答案: