fullPage.js下拉菜单

Question

我想知道什么以及如何做一个下拉菜单，但我找不到我的问题或我错过了什么。

当我尝试点击/点击按钮时它没有做任何事情（它不会丢弃任何东西）。

<link rel="stylesheet" type="text/css" href="lib/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

这是菜单。

<ul id="menu">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Option 1</a></li>
          <li><a href="#">Option 2</a></li>
        </ul>
      </li>
</ul>

我真的很新，所以这可能是一个简单的问题，但我仍然无法弄明白。

此外，如果有一个更简单的解决方案或没有bootstrap我想尝试所有。

Answer 1

经过大量的谷歌搜索和尝试不同的方法，我找到了一种方法来做我想要的。

你应该使用Bootstrap.css，Bootstrap.js，jQuery.js和Popper.js。

你也应该设置crossorigin="anonymous"

<script type="text/javascript" src="lib/js/jquery-3.3.1.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/js/popper-1.14.7.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/js/bootstrap-4.3.1.js" crossorigin="anonymous"></script>

关于JavaScripts的使用，您可以这样使用它:(如here - Bootstrap website所述）

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

这是菜单：

<ul id="menu">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
        </ul>
    </li>
</ul>

我希望这会对某些人有所帮助，因为我发现了几个类似于我的问题。

Answer 2

我已经使用bootstrap js和bootstrap css创建了小提琴示例，类似于您的代码，我也添加了整页js但下拉工作正常。

请检查here。它的工作正常。 JS和Css文件。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.com/libraries/fullPage.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<ul id="menu">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Option 1</a></li>
          <li><a href="#">Option 2</a></li>
        </ul>
      </li>
</ul>