Question

我正在尝试将这个汉堡包图标添加到我的引导程序菜单中。因此，当我点击汉堡包时，当我再次点击它时，文本应该展开并折叠。它可以正常链接工作，但只要我添加类“菜单触发器”它就会停止工作。我已经尽力了，但现在我被卡住了。

HTML：

<body>
<section>
<a class="menu-trigger" id="menu10" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<span></span>
<span></span>
<span></span>
</a>
<a id="menu10" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
link works fine
<span></span>
<span></span>
<span></span>
</a>
</section>

<section>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<script>
$(function(){
$('.menu-trigger').on('click', function() {
$(this).toggleClass('active');
return false;
});
});
</script>
</body>

CSS：

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 40px;
  height: 32px;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #333;
  border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 13px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
#menu10:not(.active):hover span:nth-of-type(2) {
  width: 70%;
}
#menu10:not(.active):hover span:nth-of-type(3) {
  width: 35%;
}
#menu10.active span:nth-of-type(1) {
  -webkit-transform: translateY(13px) rotate(-45deg);
  transform: translateY(13px) rotate(-45deg);
}
#menu10.active span:nth-of-type(2) {
  opacity: 0;
}
#menu10.active span:nth-of-type(3) {
  -webkit-transform: translateY(-15px) rotate(45deg);
  transform: translateY(-15px) rotate(45deg);
}

感谢。

Answer 1

只需从自定义脚本中删除return false即可。它会正常工作。

Answer 2

我有一个视频教程，也许这有帮助。

https://www.youtube.com/watch?v=sBBGUs2m6o8

Bootstrap“崩溃”链接

2 个答案: