使用jQuery在Bootstrap 4下拉菜单中仅显示图标

Question

我想创建一个 Web图标字体下拉菜单，当打开菜单时，该图标会在“标记图标” 仅旁边显示相应的文本。

做出选择并关闭菜单后，我想仅显示没有文字的活动标志图标。

该网页应加载默认情况下处于活动状态的标志之一，例如希腊

这是我的JQuery代码，我认为问题出在 this（TEXT）上，但是我确定有人可以修复此代码，甚至可以提供更好的解决方案，因为我确信Bootstrap使用jQuery的活动状态添加类/删除类4可能还有其他选项。

$(".dropdown-menu li a").click(function(){
  $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>' + ' <span class="caret"></span>');
  $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});

我的HTML（使用Bootstrap 4）

<nav class="p-0 navbar navbar-expand fixed-top bg-white fixed-top">
    <div class="container">
        <ul class="container-fluid navbar-nav js-signin-modal-trigger justify-content-end list-unstyled" id="navbar2SupportedContent">
            <li class="dropdown">
                <a class="bg-light btn btn-default dropdown-toggle mx-0" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><span class="flag-icon flag-icon-gr"></span></a>
                <ul class="dropdown-menu text-left" aria-labelledby="dropdownMenu1">
                    <li><a href="#" data-value="action"><span class="ml-2 label label-default"><span class="flag-icon flag-icon-gr"></span>Greece</span> </a> </li>
                    <li><a href="#" data-value="another action"><span class="ml-2 flag-icon flag-icon-fr"></span> <span>France</span></a></li>
                    <li><a href="#" data-value="something else here"><span class="ml-2 flag-icon flag-icon-us"></span> <span>United States</span></a></li>
                    <li><a href="#" data-value="separated link"><span class="ml-2 flag-icon flag-icon-es"></span><span> España</span></a></li>
                </ul>
            </li>
            <li><a href="#" data-signin="login" class="Loginbtn font-weight-bold btn navbar-btn px-md-4 px-sm-2 px-xs-1">Log in</a></li>                
            <li><a href="#" data-signin="signup" class="signupbtn text-white font-weight-bold btn navbar-btn px-md-4 px-sm-2 px-xs-1 ml-md-2 ml-sm-1 btn-secondary">Sign up</a></li>
        </ul>
    </div>
</nav>

这是一个很好玩的小提琴：https://jsfiddle.net/stvu5ckj/1/

此代码背后的动机是网站www.nextdoor.com。如果我可以创建完全一样的东西，那将是完美的！

Answer 1

嗨，我建议您必须加载一个包含所有国家/地区的iso名称的json文件，然后在每次匹配的代码中使用boostrap代码，您将在此处获得国家/地区名称是json btw Json < / p>

希望有帮助