使用 HTML、CSS 和 JS 制作带标志的下拉菜单
[英]Making dropdown menu with flags using HTML, CSS and JS
问题描述
I try to create my first website and I want it to have a dropdown menu with multiple languages.
我尝试创建我的第一个网站，我希望它有一个包含多种语言的下拉菜单。
My site uses only HTML, CSS, and JS.我的站点仅使用 HTML、CSS 和 JS。 I don't use bootstrap.我不使用引导程序。
I tried to use the codes from the following link but the results I got were:我尝试使用以下链接中的代码，但得到的结果是：
It does not include the flag and it looks different from the other buttons in the row.它不包含标志，并且看起来与行中的其他按钮不同。
What is did was adding to my main file (index.html) the following:所做的是将以下内容添加到我的主文件 (index.html) 中：
/* chooseLang * ---------------------------------------------------- */ var chooseLang = function() { $('.selectpicker').selectpicker(); };
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>` <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css"> <header id="header" class="row"> <nav id="header-nav-wrap"> <ul class="header-main-nav"> <li class="current"><a class="smoothscroll" href="#home" title="home">Home</a></li> <li><a class="smoothscroll" href="#about" title="about">About</a></li> <li><a class="smoothscroll" href="#download" title="download">Download</a></li> </ul> </nav> <select class="selectpicker" data-width="fit"> <option data-content='<span class="flag-icon flag-icon-us"></span> English'>English</option> <option data-content='<span class="flag-icon flag-icon-mx"></span> Español'>Español</option> </select> <a class="header-menu-toggle" href="#"><span>Menu</span></a> </header> <!-- /header -->
Basically, I wouldn't mind if it even was only 2 flag buttons without a menu.基本上，即使只有 2 个没有菜单的标志按钮，我也不会介意。
1 个解决方案
解决方案1
0 2021-06-17 19:19:02
You have assigned chooseLang to a function and to run the code inside a function you need to call/invoke it.您已将 chooseLang 分配给chooseLang ，要在 function 中运行代码，您需要调用/调用它。 Add chooseLang();添加chooseLang(); after assigning the variable, and everything will work as intended.分配变量后，一切都会按预期工作。
/* chooseLang * ---------------------------------------------------- */ var chooseLang = function() { $('.selectpicker').selectpicker(); }; chooseLang();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>` <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css"> <header id="header" class="row"> <nav id="header-nav-wrap"> <ul class="header-main-nav"> <li class="current"><a class="smoothscroll" href="#home" title="home">Home</a></li> <li><a class="smoothscroll" href="#about" title="about">About</a></li> <li><a class="smoothscroll" href="#download" title="download">Download</a></li> </ul> </nav> <select class="selectpicker" data-width="fit"> <option data-content='<span class="flag-icon flag-icon-us"></span> English'>English</option> <option data-content='<span class="flag-icon flag-icon-mx"></span> Español'>Español</option> </select> <a class="header-menu-toggle" href="#"><span>Menu</span></a> </header> <!-- /header -->
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.