Bootstrap 引导程序“折叠”链接

de90aj5v 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(189)

我正在尝试将这个汉堡图标添加到我的引导菜单中。因此，当我点击汉堡时，文本应该展开，当我再次点击它时，文本应该折叠。它在普通链接中工作正常，但一旦我添加了类“menu-trigger”，它就停止工作了。我已经尝试了所有我能尝试的方法，但现在我卡住了。
于飞：

<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);
}