我使用 jQuery 创建下拉列表的方法是否正确？

Question

这只是我今天早些时候在处理 Tumblr 博客主题时拼凑的东西，我想知道我是否采用了正确的方法。它似乎对我有用，但是否有创建下拉菜单的首选方法？

我使用 jQuery 只是因为它比 JS 简单得多。

我的HTML:

<html>
  <head>
    <link rel=stylesheet type=text/css href=main.css >
    <script src=jquery.js ></script>
    <script src=script.js ></script>
  </head>
  <body>
    <ul>
      <h3 id=title>Click</h3>
      <ul id=list-parent >
        <li class=element >element</li>
        <li class=element >element</li>
        <li class=element >element</li>
      </ul>
    </ul>
  </body>
</html>

我的CSS:

#list-parent {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: orange;
  opacity: 0.5;
  padding: 5px;
  width: 100px;
}

.element {
  list-style: none;
  list-style-type: none;
}

h3 {
  margin: 0;
  background: #88f;
  opacity: 0.5;
  width: 50px;
  padding: 0 0 0 5px;
}

我的jQuery:

$(document).ready(function(){
  var clicks = 1;

  $('#list-parent').css({
    height: '0px',
    padding: '0px 5px'
  });

  $('#title').click(function(){
    var height = $('#list-parent').children().length * 20;

    if (clicks === 1){
      $('#list-parent').animate({
        height: height + 'px',
        padding: '5px'
      });

      clicks ++ ;
    } else if(clicks === 2){
      $('#list-parent').animate({
        height: '0px',
        padding: '0px 5px'
      });
      clicks = 1;
    }
  });
});

Answer 1

您可以有几种不同的方法来创建下拉菜单，我不会说有明确的 "right" 和 "wrong" 这样做的方法。也就是说，您当前拥有的代码可以清理并简化为：

$(document).ready(function(){
  $('#list-parent').hide();

  $('#title').click(function(){
    $("#list-parent").slideToggle();
  });
});

要扩展您的功能（为了具有子下拉菜单），请将项目 #title 设为 class .drop。并且结构是直接在 drop 之后的元素是他们的列表。这样你就可以在下拉菜单中有多个下拉菜单，例如结构：

  <h3 class=drop>Click</h3>
  <ul class=list-parent >
    <li class=element >element</li>
    <li class=element >
      <div class=drop>Click</div>
      <ul class=list-parent >
        <li class=element >element</li>
        <li class=element >element</li>
      </ul>
    </li>        
    <li class=element >element</li>
  </ul>

你会做：

$('.list-parent').hide();

$('.drop').click(function(e){
   e.stopPropagation();
   $(this).next().slideToggle();
});

Example Fiddle

我使用 jQuery 创建下拉列表的方法是否正确？

Am I taking the correct approach towards creating a dropdown list with jQuery?

html

javascript

jquery