jQuery - CSS DropDown Navigation Items - 如何构建 Carrot Dropdown

Question

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

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

这似乎是像 TWITTER 这样的网站处理下拉列表的方式......

例如，在 Twitter 上，他们有:“转推\/”，当您单击胡萝卜时，它会在页面中注入(inject)以下内容:

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