Question

我有一种情况，我有很多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。就是这样。

Answer 1

只要单击.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;
}

使用Twitter Bootstrap对许多项目进行单一下拉

1 个答案:

的JavaScript

CSS

JSFiddle