使用 HTML、CSS 和 JS 制作带有标志的下拉菜单

Question

我尝试创建我的第一个网站，我希望它有一个包含多种语言的下拉菜单。

我的网站仅使用 HTML、CSS 和 JS。我不使用引导程序。

我尝试使用以下link 中的代码，但得到的结果是：

它不包括标志，并且看起来与行中的其他按钮不同。

所做的是向我的主文件 (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 -->

基本上，即使只有 2 个没有菜单的标志按钮，我也不介意。

Answer 1

您已将chooseLang 分配给一个函数，并在您需要调用/调用它的函数内运行代码。分配变量后添加chooseLang();，一切都会按预期工作。

/* 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 -->