3

多くの div がある状況があります (各 div は、ID、タイトル、画像などを含む製品コンテナーであるとします)。

各 div 内には、クリックするとブートストラップ ドロップダウンを切り替えたいボタンもあります。

アイテムの数を考えると、各アイテムに独自のマークアップを持たせたくないので、ドロップダウンを 1 つ作成し、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 に答える