jQuery中的弹出框列表项答案

【问题标题】：Popover list items in jQueryjQuery中的弹出框列表项
【发布时间】：2015-07-21 09:07:49
【问题描述】：

我的destination.html.twig 文件：

<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Destination Page</title>
    <link href="{{ asset('bundles/hearwegohearwego/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('bundles/hearwegohearwego/css/destination.css') }}" rel="stylesheet" type="text/css">
    <script src="{{ asset('bundles/hearwegohearwego/js/jquery-2.1.4.min.js') }}"></script>
    <script src="{{ asset('bundles/hearwegohearwego/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('bundles/hearwegohearwego/js/destination.js') }}"></script>
</head>

<body>
    <div id="toppage">
        <img src="{{ asset('bundles/hearwegohearwego/images/banner.png') }}" style="width:100%">
    </div>
    <div class="container">
        <div class="row">
            <div id="area" class="col-md-3">
                <img src="{{ asset('bundles/hearwegohearwego/images/destination/1.png') }}" id="area1">
                <img src="{{ asset('bundles/hearwegohearwego/images/destination/2.png') }}" id="area2">
                <img src="{{ asset('bundles/hearwegohearwego/images/destination/3.png') }}" id="area3">
                <img src="{{ asset('bundles/hearwegohearwego/images/destination/4.png') }}" id="area4">
                <img src="{{ asset('bundles/hearwegohearwego/images/destination/5.png') }}" id="area5">
                <img src="{{ asset('bundles/hearwegohearwego/images/destination/6.png') }}" id="area6">
                <img src="{{ asset('bundles/hearwegohearwego/images/destination/7.png') }}" id="area7">
            </div>
            <div id="city" class="col-md-3">
                <nav id="place1" hidden>
                    <ul>
                        <li><a href="#">Item 11</a></li>
                        <li><a href="#">Item 12</a></li>
                    </ul>
                </nav>
                <nav id="place2" hidden>
                    <ul>
                        <li><a href="#">Item 21</a></li>
                        <li><a href="#">Item 22</a></li>
                    </ul>
                </nav>
                <nav id="place3" hidden>
                    <ul>
                        <li><a href="#">Item 31</a></li>
                        <li><a href="#">Item 32</a></li>
                    </ul>
                </nav>
                <nav id="place4" hidden>
                    <ul>
                        <li><a href="#">Item 41</a></li>
                        <li><a href="#">Item 42</a></li>
                    </ul>
                </nav>
                <nav id="place5" hidden>
                    <ul>
                        <li><a href="#">Item 51</a></li>
                        <li><a href="#">Item 52</a></li>
                    </ul>
                </nav>
                <nav id="place6" hidden>
                    <ul>
                        <li><a href="#">Item 61</a></li>
                        <li><a href="#">Item 62</a></li>
                    </ul>
                </nav>
                <nav id="place7" hidden>
                    <ul>
                        <li><a href="#">Item 71</a></li>
                        <li><a href="#">Item 72</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</body>

</html>

还有我的destination.js 文件：

$(function()
{
    $("#area img").click(function()
    {
        var theid=$(this).attr('id');
        var sub=theid.substr(4,1);
        $("nav").each(function()
        {
            var num=$(this).attr('id').substr(5,1);
            if (sub!=num)
                $(this).hide();
        });
        $("#city #place"+sub).toggle();
    });
});

目前，每次单击图像时，都会切换相应的无序列表，同时隐藏所有其他无序列表。现在，我想使用 popover 而不是切换。我该怎么办？在 w3schools 中，仅显示内容为字符串时如何使用。我想使用列表项的内容

【问题讨论】：

标签： javascript jquery twitter-bootstrap list popover

【解决方案1】：

你可以像这样使用 boostrap 弹出框

$(function() {
  $("#area img").popover({
    html: true,
    trigger: 'hover',
    content: function() {
      return $('#' + this.id.replace('area', 'place')).removeAttr('hidden');
    }
  });
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>

<div id="toppage">
  <img src="//placehold.it/32X32"/>
</div>
<div class="container">
  <div class="row">
    <div id="area" class="col-md-3">
      <img src="//placehold.it/32X32&text=1" id="area1"/>
      <img src="//placehold.it/32X32&text=2" id="area2"/>
      <img src="//placehold.it/32X32&text=3" id="area3"/>
      <img src="//placehold.it/32X32&text=4" id="area4"/>
      <img src="//placehold.it/32X32&text=5" id="area5"/>
      <img src="//placehold.it/32X32&text=6" id="area6"/>
      <img src="//placehold.it/32X32&text=7" id="area7"/>
    </div>
    <div id="city" class="col-md-3">
      <nav id="place1" hidden>
        <ul>
          <li><a href="#">Item 11</a></li>
          <li><a href="#">Item 12</a></li>
        </ul>
      </nav>
      <nav id="place2" hidden>
        <ul>
          <li><a href="#">Item 21</a></li>
          <li><a href="#">Item 22</a></li>
        </ul>
      </nav>
      <nav id="place3" hidden>
        <ul>
          <li><a href="#">Item 31</a></li>
          <li><a href="#">Item 32</a></li>
        </ul>
      </nav>
      <nav id="place4" hidden>
        <ul>
          <li><a href="#">Item 41</a></li>
          <li><a href="#">Item 42</a></li>
        </ul>
      </nav>
      <nav id="place5" hidden>
        <ul>
          <li><a href="#">Item 51</a></li>
          <li><a href="#">Item 52</a></li>
        </ul>
      </nav>
      <nav id="place6" hidden>
        <ul>
          <li><a href="#">Item 61</a></li>
          <li><a href="#">Item 62</a></li>
        </ul>
      </nav>
      <nav id="place7" hidden>
        <ul>
          <li><a href="#">Item 71</a></li>
          <li><a href="#">Item 72</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

【讨论】：

谢谢，但是用你的代码，当我第一次悬停时，它显示了项目，然后从第二次开始，列表一直是空的