Question

我有div：

<div class = 'top-bar' id='top-bar-accounts'>
     <img src={{ user.MoreAboutUser.get_profile_photo_url }} alt = "Thumbnail" />
     <div> <strong>{{ user.username }}</strong> </div>
</div>

{{ user. }}是生成的一些字段，它们并不重要。

我该如何在这个div上创建一个下拉菜单？我想用2个选项填充它：Edit Profile和Logout。我应该写什么，我应该在html标题中写什么？

Answer 1

在最简单的形式中，你的引导菜单看起来像这样：

<!-- Your navbar -->
<nav class="navbar navbar-default" role="navigation"> 

    <!-- A container for menu items -->
    <div class="container-fluid">

      <!-- A list of items that will float right -->
      <ul class="nav navbar-nav navbar-right">

        <!-- Your dropdown menu item -->
        <li class="dropdown"> 

          <!-- Define your dropdown menu item -->
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <img src="{{ user.MoreAboutUser.get_profile_photo_url }}" width="25" height="25" alt = "Thumbnail" /><strong>{{ user.username }}</strong> <b class="caret"></b>
          </a>

          <!-- The list of dropdown menu items -->
          <ul class="dropdown-menu">
            <li><a href="#">Edit Profile</a></li>
            <li><a href="#">Logout</a></li>
          </ul>

        </li>
      </ul>
  </div>
</nav>

这是一个小提琴：http://jsfiddle.net/nzcKY/

您需要导入：

bootstrap css
引导程序js
的jQuery

Answer 2

元素类型不重要。您只需要在函数中使用适当的选择器。我这样做了一次：

<ul class="nav navbar-nav navbar-right">
                    <li id="theme_selector" class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Theme <b class="caret"></b></a>
                        <ul id="theme" class="dropdown-menu" role="menu">
                            <li><a href="#">Amelia</a></li>
                            <li><a href="#">Cerulean</a></li>
                            <li><a href="#">Cyborg</a></li>
                            <li><a href="#">Cosmo</a></li>
                            <li><a href="#">Darkly</a></li>
                            <li><a href="#">Flatly</a></li>
                            <li><a href="#">Lumen</a></li>
                            <li><a href="#">Simplex</a></li>
                            <li><a href="#">Slate</a></li>
                            <li><a href="#">Spacelab</a></li>
                            <li><a href="#">Superhero</a></li>
                            <li><a href="#">United</a></li>
                            <li><a href="#">Yeti</a></li>
                        </ul>
                    </li>
                </ul>

这里的函数响应了ID为主题的UL内部li元素的变化：

$('#theme li').click(function () {
        //alert('item: ' + $(this).text());
        switch_style($(this).text());
    });

div上的Bootstrap下拉列表

2 个答案: