3

我有很多 div 的情况（比如每个 div 都是一个产品容器，带有 ID、标题、图像等）。

在每个 div 中，还有一个按钮，单击该按钮时我想切换引导下拉菜单。

鉴于项目的数量，我不希望每个项目都有自己的标记，所以我想我会创建一个下拉列表并通过 javascript 以编程方式显示它。

不幸的是，我找不到办法。任何帮助，将不胜感激

提前致谢

下面是一个简单的例子

@jrharshath，感谢您的及时回复。我发布了一些代码（虚拟），我相信这可以帮助您回答问题！

<div id="container">
  <div class="acontainer">
    <span class="aclicker pull-right btn btn-mini"><i class="icon-chevron-down"></i></span>
    <code>ID: w4234234</code><br />
    <img src="..." /><br />
    product title here
  </div>
  (many of the above '.acontainer' repeating)
</div><!-- end container -->


<div class="dropdown" id="popmenu">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
      <li><a tabindex="-1" href="#">Action</a></li>
        <li><a tabindex="-1" href="#">Another action</a></li>
        <li><a tabindex="-1" href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Separated link</a></li>
    </ul>
</div>

每当有人单击任何 .aclicker 元素时，我都想显示#popmenu。只是。

4

1 回答 1

2

.aclicker每当单击元素时，您都可以使用 jQuery 来移动它。

JavaScript

var $popmenu = $('#popmenu')
  , last;

$('body').on('click.dropdown', '.aclicker', function() {

  // Make sure it's not already open here
  $popmenu.hasClass('open') && last === this ?
    $popmenu.removeClass('open') : // close it

    // otherwise, reposition
    $popmenu
      .css({
        top: this.offsetTop + this.offsetHeight,
        left: this.offsetLeft + this.offsetWidth - 172
      })
      .children('.dropdown-menu')
      .dropdown('toggle'); // then open it

  last = this; // save reference
  return false;
});​

CSS

#popmenu {
  position: absolute;
}

JSFiddle

于 2012-10-17T17:59:29.200 回答