Bootsrap jquery下拉菜单-如何在内容区域中显示数据值

Question

有人能帮个忙吗？我的目标是通过jquery创建一个Bootstrap下拉框。一切都很好，除了最后一位、数据值域到.menu的输出、

内容。

JS小提琴在这里：http://jsfiddle.net/schllrcgn/0yzru5va/75/

如有任何帮助，我们不胜感激！非常感谢!

$(document).ready(function(){
var classes = ['.DDFProjectTopics'];
for (i = 0; i < classes.length; i++) {
    $(classes[i]).wrapAll('<ul class="dropdown-menu">')
}
});
$(document).ready(function(){
$( ".dropdown-menu" ).before( '<form><div class="btn-group"><a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">Topics&nbsp;<span class="caret"></span></a>');
});
$(document).ready(function(){
$('<p class="menu">content</p>').insertAfter('.btn-group');
});
$(document).ready(function(){
$('.dropdown-menu').insertAfter('.btn');
});
$(".dropdown-menu li a").click(function(){
  var selText = $(this).attr('data-value');
    $(this).parents('.btn-group').siblings('.menu').html(selText)
});

.menu{
    margin: 40px;
border: 1px solid blue;
height: 50px
;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<li class="DDFProjectTopics"><a href="#" data-value="this is the story">1</a></li>
 <li class="DDFProjectTopics"><a href="#" data-value="this can be <b>html</b>">2</a></li>
 <li class="DDFProjectTopics"><a href="#" data-value="action-3">Item III</a></li>

Answer 1

我建议使用以下函数。记住在你的提琴中也要使用HTTPS。

https://jsfiddle.net/Twisty/byk9p2rm/23/

JavaScript

$(function() {
  function makeDropDown(tObj) {
    var wrapper = $("<div>", {
      class: "btn-group"
    }).insertBefore(tObj);
    var btn = $("<button>", {
      class: "btn btn-secondary dropdown-toggle",
      type: "button",
      "data-toggle": "dropdown",
      "aria-haspopup": "true",
      "aria-expanded": false
    }).html("Topics").appendTo(wrapper);
    var menu = $("<ul>", {
      class: "dropdown-menu",
    }).appendTo(wrapper);
    var items = tObj.children();
    items.each(function(i, el) {
      $(el).detach().appendTo(menu);
    });
    tObj.remove();
    var cnt = $("<p>", {
      class: "menu"
    }).html("Content").insertAfter(wrapper);
    $("a", items).click(function(e) {
      e.preventDefault();
      var txt = $(this).data("value");
      cnt.html(txt);
    });
  }

  makeDropDown($(".items"));
});

你只需要在Ready上运行一个函数，它就会执行其中的所有代码。基于以下示例，此函数在为<ul>制作下拉包装器时非常特殊：https://getbootstrap.com/docs/4.0/components/dropdowns/