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

您可以使用多种不同的方法来创建下拉列表，我不会说有明确的“正确”和“错误”这样做的方式。这就是说，您目前拥有的代码可以清理并简化为：

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

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

要扩展您的功能（具有子下拉菜单），请将项#title设为类.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的下拉列表？

1 个答案: