jquery - 如何根据单击项目的宽度设置下拉菜单的宽度

Question

我想将下拉菜单的宽度设置为单击的链接的宽度。这必须是通用的，而不是基于 ID，因为一个页面上可能有很多 ID。这是我的标记：

  <div class="dropdown bottom clearfix">
    <a class="nav toolbar-nav dropdown-toggle" data-toggle="dropdown"><h2 class="nav">Clickable Item</h2></a>
    <ul class="dropdown-menu dropdown-bottom-right clearfix"  role="menu" aria-labelledby="dLabel">
      <li><a>Item One</a></li>
      <li><a>Item Two</a></li>
      <li><a>Item Three</a></li>
    </ul>
  </div>

顺便说一句，我正在使用引导程序。

Answer 1

基本上只使用 $.width() jquery 方法。您可以使用 $.each() 方法调用页面上的所有项目并格式化它们各自的列表。

jQuery：

$(".nav").each(function(){
    var width = $(this).width();
    $(this + "li").css("width", width);
});

如果您仅将这些 DOM 元素用于可点击项目，则可以将“.nav”替换为“h2”或“a”，而让标签保持打开状态以进行格式化。