1

「拡張可能な」メニューを作成しようとしています。したがって、ユーザーがオプション A をクリックすると、2 つのサブオプションが表示されます。私はこのようなことをしようとしていますが、メニューでは...

これはこれまでの私のコードです...

<li>
 <a href="?op=1" data-toggle="collapse" data-target=".nav-collapse88"><i class="icon-picture icon-white"></i> Galleries</a>
                        <div class="nav-collapse88">
                            <ul>
                                  <li>
                                    <a href=""><i class="icon-play"></i> Add</a>
                                  </li>
                                  <li>
                                    <a href=""><i class="icon-play"></i> Delete</a>
                                  </li>
                             </ul>
                        </div>
                      </li>

したがって、ギャラリーをクリックすると、オプションの追加と削除が表示されます。助言がありますか？

4

4 に答える 4

4

私はulをそのようにネストします：

<ul>
   <li>
      <a class="expand">Link used to expand</a>
      <ul>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
        <li>Sub Menu Item</li>
      </ul>
  </li>
</ul>

私はこのjqueryを使用します：

$(document).on('click', 'a.expand', function(e) {
  e.preventDefault();
  $(this).siblings('ul').slideToggle();
});

何も表示しないようにサブメニューCSSを設定する必要があります。

これらの線に沿った何かがトリックを行う必要があります。

于 2012-12-14T14:33:00.753 に答える
1

これは機能します：

<ul>
  <li class="dropdown">
    <a href="?op=1">Support</a>
    <ul class="dropdown-menu" role="menu">
      <li><a href=""><i class="icon-play"></i> Add</a></li>
      <li><a href=""><i class="icon-play"></i> Delete</a></li>
    </ul>
  </li>
</ul>
于 2012-12-14T14:52:56.173 に答える
0

このhttp://jsfiddle.net/68RXP/213/をtyy 

$(function(){
        $(".nav-collapse88").hide();
        $("a").click(function(e){
            e.preventDefault();
            $(".nav-collapse88", $(this).parent()).slideToggle();        
        });
    })​
<li>
 <a href="?op=1">
     <i class="icon-picture icon-white"></i> Galleries</a>
                        <div class="nav-collapse88">
                            <ul>
                                  <li>
                                    <a href=""><i class="icon-play"></i> Add</a>
                                  </li>
                                  <li>
                                    <a href=""><i class="icon-play"></i> Delete</a>
                                  </li>
                             </ul>
                        </div>
                      </li>​
于 2012-12-14T14:33:32.337 に答える
0

クラスを折りたたむのではなく、ドロップダウンにする必要があると思います。これが、ブートストラップのドキュメントでメニューに推奨されている方法です。

クラスを bedropdownに変更し、内側の div を削除して、クラスdropdown-menuを内側の ul に追加します。

<li class="dropdown">
<a href="?op=1" data-toggle="dropdown"><i class="icon-picture icon-white"></i>>Galleries</a>
                        <ul class="dropdown-menu">
                              <li>
                                <a href=""><i class="icon-play"></i> Add</a>
                              </li>
                              <li>
                                <a href=""><i class="icon-play"></i> Delete</a>
                              </li>
                         </ul>
                  </li>
于 2012-12-14T14:31:41.833 に答える