javascript - 单击图像后如何创建下拉菜单？ [ Bootstrap/Angular ]

Question

我做了一些添加下拉类的尝试，但我不知道从哪里开始。这是我想要添加下拉菜单的小代码片段:

<span
  id="dropdown-info"
  ng-init= "myVar='images/info_icon_off.png'" 
  ng-mouseover="myVar='images/info_icon_on.png'" 
  ng-mouseout="myVar='images/info_icon_off.png'"
  ng-click="doSomething()">
    <img class="info-icon" ng-src="{{myVar}}" alt="Information" width="10" height="10">
</span>

Answer 1

如果您使用的是 Bootstrap ，就是这样...您可以使用 li 执行 ng-repeat 来动态加载列表。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="dropdown">
<img src="https://c1.iggcdn.com/indiegogo-media-prod-cld/image/upload/c_limit,w_620/v1456219661/avvcx99jxynsu2svk9po.png" class=" dropdown-toggle" data-toggle="dropdown" /> 
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>