fullPage.js 下拉菜单
fullPage.js dropdown menu
我正在尝试找出下拉菜单的内容和方法,但找不到我的问题或遗漏的内容。
当我尝试 click/tap 按钮时,它没有做任何事情(它没有掉落任何东西)。
<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我想全部尝试。
经过大量谷歌搜索和尝试不同的方法后,我找到了一种方法来做我想做的事。
您应该使用 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>
关于 JavaScript 的使用,您可以这样使用它:(如所述 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>
我希望这对某些人有所帮助,因为我发现了几个与我相似的问题。
我已经使用 bootstrap js 和 bootsrap 创建了 fiddle 示例 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>
我正在尝试找出下拉菜单的内容和方法,但找不到我的问题或遗漏的内容。
当我尝试 click/tap 按钮时,它没有做任何事情(它没有掉落任何东西)。
<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我想全部尝试。
经过大量谷歌搜索和尝试不同的方法后,我找到了一种方法来做我想做的事。
您应该使用 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>
关于 JavaScript 的使用,您可以这样使用它:(如所述 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>
我希望这对某些人有所帮助,因为我发现了几个与我相似的问题。
我已经使用 bootstrap js 和 bootsrap 创建了 fiddle 示例 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>