Javascript Bootstrap 移动菜单图标更改为 x 关闭

Bootstrap mobile menu icon change to x close

提问by DoubleD

EDIT

编辑

@zimanswer uses 2020 CSS to easily solve the issue and better applies to Bootstrap 4.

@zimanswer 使用 2020 CSS 轻松解决问题，更好地适用于 Bootstrap 4。

The original question and selected answer are still valid and very informative.

原始问题和选定的答案仍然有效且信息量很大。

ORIGINAL QUESTION

原问题

I would like, when in mobile view, for the menu icon (defined with class icon-bar in the bootstrap basic navbar example) to change to an X shape (Something similar to what happens here: https://www.mint.combut less fancy (I just want to replace the 3 stripes with an X).

我希望在移动视图中时，菜单图标（在引导程序基本导航栏示例中使用类图标栏定义）更改为 X 形状（类似于此处发生的情况：https: //www.mint.com但不那么花哨（我只想用 X 替换 3 个条纹）。

At the moment I am using a custom id: #ChangeToggle

目前我正在使用自定义 ID：#ChangeToggle

<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>

Along with the following javascript function (I know it's basic but I'm new to this):

连同以下 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>

Everything works, the only issue is that when I click exactly on the X icon the menu does not close. It only closes when I click outside of it (anywhere else in the button). The only thing it does while clicking on the X icon is going back to the original 3 stripes.

一切正常，唯一的问题是当我完全单击 X 图标时，菜单不会关闭。它仅在我点击它外部（按钮中的任何其他地方）时关闭。单击 X 图标时它所做的唯一一件事就是回到原来的 3 条条纹。

Anyone knows what I am doing wrong?

有谁知道我做错了什么？

回答by ckuijjer

Your JavaScript replaces the inner html of the #ChangeToggleelement to show either the X or the hamburger icon. Precisely clicking on the X or the hamburger menu instead of the #ChangeTogglewill remove the element being clicked on which I think prevents it from bubbling up. As Bootstrap's collapse pluginuses an event handler on the document to determine if an element has been clicked, the collapse plugin will never get notified.

您的 JavaScript 替换#ChangeToggle元素的内部 html以显示 X 或汉堡包图标。准确地点击 X 或汉堡菜单而不是#ChangeToggle将删除被点击的元素，我认为可以防止它冒泡。由于 Bootstrap 的折叠插件使用文档上的事件处理程序来确定元素是否已被单击，因此折叠插件永远不会收到通知。

I've created a small example where a click handler on the pink .outerarea replaces the green .innerarea. Note that clicking on the pink area (your #ChangeToggle) will lead to two events, where clicking on the green area (your X icon) will lead to a single event.

我创建了一个小示例，其中粉色.outer区域上的点击处理程序替换了绿色.inner区域。请注意，单击粉红色区域（您的#ChangeToggle）将导致两个事件，其中单击绿色区域（您的 X 图标）将导致一个事件。

$(function() {
  $('.outer')
    .click(function() {
      $('.outer').html('<div class="inner"></div>');
      fired('.js-outer');
    });

  $(document).on('click', '.outer', function() {
    fired('.js-document');
  });
});

function fired(el) {
  $(el).addClass('event--fire');
  window.setTimeout(function() {
    $(el).removeClass('event--fire')
  }, 100);
}

body {
  font-family: Helvetica Neue, Helvetica, Arial;
}
.outer,
.inner {
  display: inline-block;
  padding: 20px;
}
.outer {
  border: 1px solid #c66;
  background-color: #f99;
}
.inner {
  border: 1px solid #6c6;
  background-color: #9f9;
}
.event {
  margin: 10px 0;
}
.event::before {
  display: inline-block;
  content: '';
  border: 1px solid #ccc;
  padding: 10px;
  vertical-align: middle;
  margin-right: 10px;
}
.event--fire:before {
  background-color: #ff9;
}

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>


<div class="outer">
  <div class="inner">
  </div>
</div>

<div class="event js-outer">Event fires on .outer</div>
<div class="event js-document">Event fires on document</div>

The easiest way to solve this issue for your navigation bar is to hide/show the X or hamburger icon instead of replacing. In the example below both the X and the hamburger icon are in the html, and toggling the class .hiddenis used to show the correct icon.

为导航栏解决此问题的最简单方法是隐藏/显示 X 或汉堡图标而不是替换。在下面的示例中，X 和汉堡包图标都在 html 中，切换类.hidden用于显示正确的图标。

$(function() {
  $('#ChangeToggle').click(function() {
    $('#navbar-hamburger').toggleClass('hidden');
    $('#navbar-close').toggleClass('hidden');  
  });
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button id="ChangeToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <div id="navbar-hamburger">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </div>
        <div id="navbar-close" class="hidden">
          <span class="glyphicon glyphicon-remove"></span>
        </div>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Instead of adding a jQuery click handler next to Bootstrap's collapse plugin, you could also use the events fired by the collapse pluginto hide or show the correct icon. Use the shown.bs.collapseevent to show the X icon, and the hidden.bs.collapseevent to show the hamburger icon.

除了在 Bootstrap 的折叠插件旁边添加 jQuery 单击处理程序之外，您还可以使用由折叠插件触发的事件来隐藏或显示正确的图标。使用shown.bs.collapse事件显示 X 图标，使用hidden.bs.collapse事件显示汉堡包图标。

$(function() {
  
  $('#bs-example-navbar-collapse-1')
    .on('shown.bs.collapse', function() {
      $('#navbar-hamburger').addClass('hidden');
      $('#navbar-close').removeClass('hidden');    
    })
    .on('hidden.bs.collapse', function() {
      $('#navbar-hamburger').removeClass('hidden');
      $('#navbar-close').addClass('hidden');        
    });
  
});

#navbar-close {
  color: #888;
  width: 22px;
  height: 14px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button id="ChangeToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <div id="navbar-hamburger">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </div>
        <div id="navbar-close" class="hidden">
          <span class="glyphicon glyphicon-remove"></span>
        </div>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
        </li>
      </ul>
    </div>
  </div>
</nav>

回答by Helmut

You don't need Javascript, CSS will do the Job

你不需要 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;
        }
    }
}

回答by dimitar

Smart decision helped me in codepen

聪明的决定帮助我使用 codepen

HTML

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

.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

JS

$(".navbar-toggle").on("click", function () {
    $(this).toggleClass("active");
});

回答by Soubhagya Kumar Barik

No need to use javascript through css also you can do please follow below code.

无需通过 css 使用 javascript 也可以，请按照以下代码进行操作。

HTML

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(in css use :notwhich will perform faster animation rather than javascript)

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

回答by Zim

As of Bootstrap 4.1, the "hamburger" toggler is no longer <span>tags, and is now a single SVG icon background image.

从Bootstrap 4.1 开始，“汉堡包”切换器不再是<span>标签，现在是单个 SVG 图标背景图像。

Therefore it's simplest to swap it out with a little CSS. Then you can use another font icon (like FontAwesome) or a simple '?' character...

因此，用一点 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

演示

---

---

Another option is this animated hamburger:
https://codeply.com/p/L9HT5GaUtt

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

回答by M. Lak

The below code helps you to solve this issue.

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

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:

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

javascript

javascript

<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>

This snippets is used to change the mobile icon to close icon on click the button. Demo

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

回答by Michael Casserly

I tried @Zim's solution and it worked perfectly, thanks for sharing. I did make 2 slight adjustments:

我尝试了@Zim 的解决方案，效果很好，感谢分享。我确实做了 2 个轻微的调整：

1. I changed border-0 to border-1 to keep a border around the hamburger image.
2. I added a background color on the div since the X ended up being a similar color to my existing background.

1. 我将 border-0 更改为 border-1 以在汉堡包图像周围保留边框。
2. 我在 div 上添加了背景颜色，因为 X 最终与我现有的背景颜色相似。