jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 如何将垂直菜单项添加到Bootstrap popover?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我在我的网站上使用Bootstrap v3.3.5.
我想打开一个包含三个由水平线分隔的菜单项的弹出窗口.

菜单项应垂直,应如下所示:

>编辑活动
>邀请会员
>删除事件

每个菜单项都应该是超链接,以打开一些新的模态对话框或类似的东西.
对于它我尝试下面的代码,但它没有为我工作.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <Meta charset="utf-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <a href="#" data-toggle="popover">Toggle popover</a>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>

解决方法

这样的东西应该工作,这是一个 @L_673_11@.

这里我使用了现有的Bootstrap组件,列表组作为示例,但您可以将任何HTML放入您的popover:

HTML

<!-- body content -->
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <button type="button" class="btn btn-info" data-toggle="popover" title="Popover title">Toggle popover</button>
    </div>
  </div>
</div>

<!-- loaded popover content -->
<ul id="popover-content" class="list-group" style="display: none">
  <a href="#" class="list-group-item">Edit Event</a>
  <a href="#" class="list-group-item">Invite Members</a>
  <a href="#" class="list-group-item">delete Event</a>
</ul>

jQuery的

$(function() {
  $('[data-toggle="popover"]').popover({
        html: true,content: function() {
            return $('#popover-content').html();
        }
  });
});

一个非常有用的库,可以很好地使用Bootstrap,可能会帮助你创建像内联编辑这样的异步@L_675_13@,这是X-Editable

大佬总结

以上是大佬教程为你收集整理的jquery – 如何将垂直菜单项添加到Bootstrap popover?全部内容,希望文章能够帮你解决jquery – 如何将垂直菜单项添加到Bootstrap popover?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。