jQuery - CSS DropDown 导航项 - 如何构建 Carrot 下拉菜单

Question

我有兴趣学习一种智能、优雅的方法来在整个网站中构建导航项，这些导航项具有单击时会展开菜单项列表的胡萝卜。

我希望菜单项能够动态构建（不一定全部使用ajax）。但它们不应该在页面上硬编码。

这似乎就是像 TWITTER 这样的网站处理下拉菜单的方式......

例如在 Twitter 上，它们有：“Retweets \/”，当您单击胡萝卜时，它会在页面中注入以下内容：

<ul class="drop-down" style="left: 0px; right: auto; top: 31px; visibility: visible; ">
  <li class="stream-link" data-item-id="">
  <a title="Retweets by others" href="/#!/retweets_by_others">
    <b class="item-name">
      Retweets by others
    </b>
    </a>
</li><li class="stream-link" data-item-id="">
  <a title="Retweets by you" href="/#!/retweets">
    <b class="item-name">
      Retweets by you
    </b>
    </a>
</li><li class="stream-link" data-item-id="">
  <a title="Your Tweets, retweeted" href="/#!/retweeted_of_mine">
    <b class="item-name">
      Your Tweets, retweeted
    </b>
    </a>
</li>
</ul>

有关如何完成此操作的建议？

谢谢

Answer 1

$("button").next().hide();
$("button .carrot").click(function() {
  $button = $(this).parent().toggleClass("active");
  $button.parent().next().toggle().offset($button.offset());
});

如果你的 html 看起来像这样：

<button>Button <span class="carrot">v</span></button>
<ul>
  <li>blah blah blah</li>
</ul>