jQuery - CSS DropDown 导航项 - 如何构建胡萝卜下拉菜单

Question

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

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

这似乎是 TWITTER 之类的网站处理下拉菜单的方式...

例如在 Twitter 上，他们有：“转推 \/”，当你点击胡萝卜时，它会在页面中注入以下内容：

<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>