Bootstrap 引导移动的菜单图标更改为x关闭

q5iwbnjs  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(9)|浏览(283)

编辑

@zim answer使用2020 CSS轻松解决问题，更好地应用于Bootstrap 4。
原始问题和选择的答案仍然有效，信息量很大。

原始问题

在移动的视图中，我希望菜单图标（在 Bootstrap 基本导航栏示例中使用类icon-bar定义）更改为X形状（类似于此处所发生的情况：https://www.mint.com但不那么花哨（我只想用一个X来替换3条）。
目前我使用的是自定义id：#更改切换

<button id="ChangeToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
</button>

沿着下面的javascript函数（我知道这是基本的，但我是新手）：

<script>    
$('#ChangeToggle').click(function () {
    if($('#ChangeToggle span').hasClass('ToggleButton')) {
        $('#ChangeToggle').html('<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>'); 
    }
    else {      
        $('#ChangeToggle').html('<span class="ToggleButton glyphicon glyphicon-remove"></span>'); 
    }
});
</script>

一切正常，唯一的问题是，当我点击X图标时，菜单不会关闭。它只会在我点击它之外（按钮中的任何其他地方）时关闭。点击X图标时，它所做的唯一事情就是回到原来的3条条纹。
有人知道我做错了什么吗？

twitter-bootstrap

9条答案

按热度按时间
i5desfxk

i5desfxk1#

JavaScript替换了#ChangeToggle元素的内部html以显示X或汉堡包图标。准确地单击X或汉堡包菜单而不是#ChangeToggle将删除被单击的元素，我认为这会阻止它冒泡。由于Bootstrap的collapse插件使用文档上的事件处理程序来确定是否单击了某个元素，折叠插件将永远不会得到通知。
我已经创建了一个小例子，其中粉红色.outer区域上的click处理程序替换了绿色.inner区域。注意，单击粉红色区域（您的#ChangeToggle）将导致两个事件，而单击绿色区域（您的X图标）将导致一个事件。
第一个
解决这个问题最简单的方法是隐藏/显示X或汉堡包图标，而不是替换。在下面的例子中，X和汉堡包图标都在html中，切换类.hidden用于显示正确的图标。
第一个
除了在Bootstrap的collapse插件旁边添加一个jQuery点击处理程序之外，还可以使用collapse插件触发的事件来隐藏或显示正确的图标。使用shown.bs.collapse事件来显示X图标，使用hidden.bs.collapse事件来显示汉堡包图标。
第一个

赞(0）分享  回复(0）举报  2022-12-08
2wnc66cl

2wnc66cl2#

这对我很有效
理论
CSS提供了所有必要的动画工具。基本上是这样的：

  • 顶部和底部线条必须旋转以形成X
  • 中间线必须消失

X将比汉堡包线更高更窄，因此：

  • 顶线和中线必须垂直向外移动并向右移动，以保持其中心位置

应用

第一个
是什么让它工作
具体来说，由于顶线和底线旋转45度形成X，它们的中心线占宽度的70%，因此它们必须移动15%，这可以用勾股定理计算。

碰巧的是，我们的汉堡菜单是26 x21像素，或者说比它的高度宽24%，但是当你把线条移动到位并考虑到线条的高度（这里定义为3 px）时，X最终是20 x20平方。
在这个特定的实现中，我们将每一行的旋转点定义为中心左侧，这会影响我们将行向上移动的程度，因为这些行的高度大约为3 px，它们每一行都将X的高度增加大约（2.1/2）=1.05px，或者大约为X高度的33%。
因此，33%是它们必须垂直向外移动的量，这样两条线在X的中心相遇，形成一个20 x20 px的正方形。

自定义

X总是会形成一个正方形，所以要想知道它们移动了多少，你只需要知道你的<span>条的宽度和高度以及最终得到的汉堡图标的高度。
将这些数字代入以下等式：

或者在代码中：

const line_width = 26; // px
const line_height = 3; // px
const hamburger_height = 21; // px

const x_width = x_height = 0.8 * line_width;
const line_move_y_percent = 100 * (line_width - x_width) / (2 * line_height)
const line_move_right_percent = 100 * (x_height - hamburger_height) / (2 * line_height)
赞(0）分享  回复(0）举报  2022-12-08
iqjalb3h

iqjalb3h3#

你不需要Javascript，CSS就可以了

.navbar-toggle {
    .icon-bar {
        transition: 300ms ease-in-out;
        background-color: #fff;
        position: relative;
        width: 24px;
        height: 3px;
    }
    .icon-bar:last-child {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: -7px;
    }
    .icon-bar:nth-child(2) {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 0px;
    }
    .icon-bar:nth-child(3) {
        opacity: 0;
    }
    &.collapsed {
        .icon-bar {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);        
            top: 0;
            opacity: 1;
        }
    }
}
赞(0）分享  回复(0）举报  2022-12-08
vc9ivgsu

vc9ivgsu4#

自Bootstrap 4.1起，“汉堡包”切换器不再是<span>标记，而现在是单个SVG图标背景图像。
因此，最简单的方法就是用一点CSS来替换它。然后你可以使用另一个字体图标（比如FontAwesome）或者一个简单的""字符...

<button class="navbar-toggler collapsed border-0" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        <span class="navbar-toggler-icon"></span>
        <div class="close-icon py-1">✖</div>
   </button>

   /* hide close when burger shown */
   .navbar-toggler.collapsed .close-icon {
      display: none;
   }

   .navbar-toggler:not(.collapsed) .navbar-toggler-icon {
      display: inline;
   }

Demo
另一个选择是这个动画汉堡：
https://codeply.com/p/L9HT5GaUtt

赞(0）分享  回复(0）举报  2022-12-08
vxqlmq5t

vxqlmq5t5#

Smart decision helped me in codepen

HTML格式

<div class="navbar-header">
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
     </button>
</div>

CSS格式

.navbar-toggle .icon-bar:nth-of-type(2) {
    top: 1px;
}
.navbar-toggle .icon-bar {
    position: relative;
    transition: all 500ms ease-in-out;
}
.navbar-toggle.active .icon-bar:nth-of-type(1) {
    top: 6px;
    transform: rotate(45deg);
}
.navbar-toggle.active .icon-bar:nth-of-type(2) {
    background-color: transparent;
}
.navbar-toggle.active .icon-bar:nth-of-type(3) {
    top: -6px;
    transform: rotate(-45deg);
}

JS

$(".navbar-toggle").on("click", function () {
    $(this).toggleClass("active");
});
赞(0）分享  回复(0）举报  2022-12-08
omhiaaxx

omhiaaxx6#

不需要通过css使用javascript，你也可以做，请按照下面的代码。

HTML格式

<div class="navbar-header">
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
     </button>
</div>

CSS（在css中使用:not，它将比javascript执行更快的动画）

.navbar-toggle .icon-bar {
    position: relative;
    transition: all 200ms ease-in-out;
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(1) {
    top: 6px;
    transform: rotate(45deg);
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(2) {
    background-color: transparent;
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(3) {
    top: -6px;
    transform: rotate(-45deg);
}
赞(0）分享  回复(0）举报  2022-12-08
xmd2e60i

xmd2e60i7#

下面的代码可以帮助您解决这个问题。

HTML：

<div class="content">
<h1>Mobile Navigation menu using css and jquery</h1>
<div class="icons">
<button class="icon">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>

CSS：

.btn {
background-color: #ffd200;
color: #00174f;
display: inline-block;
text-decoration: none;
padding: 13px 30px;
margin: 30px 0 0 0;
border-radius: 3px;
font-weight: bold;
}
.btn:hover {
background-color: #fff;
}
.btn--transition {
-webkit-transition: -webkit-transform 0.2s;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
:focus {
outline: none;
}
.icons {
margin: 50px 0;
}
.icon {
margin: 0 30px 0 0;
}

.icon {
background-color: #ff3000;
border: 0;
height: 79px;
width: 79px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.icon span {
display: block;
height: 5px;
width: 33px;
background-color: #ffffff;
border-radius: 2px;
position: absolute;
left: 23px;
-webkit-transition: -webkit-transform 0.3s;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.icon span:first-child {
top: 28px;
}
.icon span:nth-child(2) {
top: 37px;
}
.icon span:last-child {
top: 46px;
}
.icon--active span:first-child {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 37px;
}
.icon--active span:last-child {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
top: 37px;
}
.icon--active span:nth-child(2) {
opacity: 0;
}
.icon--button {
border-radius: 10px;
}
.icon-transition {
-webkit-transition: -webkit-transform 0.3s;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}

Java脚本

<script>
var animation = 'rubberBand';
$('.icon').on('click', function () {
$(this).toggleClass('icon--active');
});
$('.icon').on('click', function () {
$(this).addClass('animated ' + animation).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass('animated ' + animation);
});
});
</script>

此代码段用于在单击按钮时将移动的图标更改为关闭图标。

赞(0）分享  回复(0）举报  2022-12-08
ej83mcc0

ej83mcc08#

我尝试了@Zim的解决方案，效果很好，谢谢分享。我做了两个小调整：
1.我将border-0更改为border-1，以便在汉堡包图像周围保留边框。
1.我在div上添加了一个背景颜色，因为X最终与我现有的背景颜色相似。

赞(0）分享  回复(0）举报  2022-12-08
ippsafx7

ippsafx79#

** Bootstrap 5.2版：**

于飞：

<button class="navbar-toggler" id="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    <span class="close py-1"><i class="bi bi-x-lg"></i></span>
</button>

CSS：

.navbar button[aria-expanded="true"] > span.close {
   display: inline;
}

.navbar button[aria-expanded="true"] > span.navbar-toggler-icon {
   display: none;
}

.navbar button[aria-expanded="false"] > span.close {
   display: none;
}

在我的例子中，我使用Bootstrap Icons来显示关闭图标，所以一定要下载或者至少包含图标字体样式表。

赞(0）分享  回复(0）举报  2022-12-08
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com