Bootstrap移动菜单图标更改为x关闭 [英] Bootstrap mobile menu icon change to x close
问题描述
我希望，在移动视图中，菜单图标（在bootstrap基本导航栏示例中使用类图标栏定义）更改为X形状（类似于此处发生的事情： https://www.mint.com 但不那么花哨（我只想用X替换3条纹）。
目前我正在使用自定义ID：#ChangeToggle
< button id =ChangeToggletype =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =＃navbararia-expanded =falsearia-controls =navbar>
< span class =sr-only>切换导航< / 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>切换导航< / 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个条纹。
任何人都知道我做错了什么？
您的JavaScript替换了 #ChangeToggle 元素的内部html，以显示X或汉堡包图标。准确地点击X或汉堡菜单而不是 #ChangeToggle 将删除被点击的元素，我认为这可以阻止它冒泡。由于Bootstrap的折叠插件使用文档上的事件处理程序来确定是否已单击某个元素，因此崩溃插件将永远不会收到通知。
我创建了一个小例子，粉红色 .outer 区域的点击处理程序取代绿色 .inner 区域。请注意，单击粉红色区域（ #ChangeToggle ）将导致两个事件，其中单击绿色区域（您的X图标）将导致单个事件。 / p>
$（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;内容：''; border：1px solid #ccc;填充：10px; vertical-align：middle; margin-right：10px;}。event - fire：在{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>事件触发.outer< / div>< div class =event js-document>事件触发文件< / div>
为导航解决此问题的最简单方法bar是隐藏/显示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> <！ - 品牌和切换被分组以获得更好的移动显示 - > < div class =navbar-header> < button id =ChangeToggletype =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =＃bs-example-navbar-collapse-1> < div id =navbar-hamburger> < span class =sr-only>切换导航< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < / DIV> < div id =navbar-closeclass =hidden> < span class =glyphicon glyphicon-remove>< / span> < / DIV> < /按钮> < a class =navbar-brandhref =＃>品牌< / a> < / DIV> < div class =collapse navbar-collapseid =bs-example-navbar-collapse-1> < ul class =nav navbar-nav> < li class =active>< a href =＃>链接< span class =sr-only>（当前）< / span>< / a> < /锂> < / UL> < / DIV> < / div>< / nav>
而不是添加在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;宽度：22px;身高：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> <！ - 品牌和切换被分组以获得更好的移动显示 - > < div class =navbar-header> < button id =ChangeToggletype =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =＃bs-example-navbar-collapse-1> < div id =navbar-hamburger> < span class =sr-only>切换导航< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < / DIV> < div id =navbar-closeclass =hidden> < span class =glyphicon glyphicon-remove>< / span> < / DIV> < /按钮> < a class =navbar-brandhref =＃>品牌< / a> < / DIV> < div class =collapse navbar-collapseid =bs-example-navbar-collapse-1> < ul class =nav navbar-nav> < li class =active>< a href =＃>链接< span class =sr-only>（当前）< / span>< / a> < /锂> < / UL> < / DIV> < / div>< / nav>
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.com but less fancy (I just want to replace the 3 stripes with an X).
At the moment I am using a custom 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):
<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.
Anyone knows what I am doing wrong?
Your JavaScript replaces the inner html of the #ChangeToggle element to show either the X or the hamburger icon. Precisely clicking on the X or the hamburger menu instead of the #ChangeToggle will remove the element being clicked on which I think prevents it from bubbling up. As Bootstrap's collapse plugin uses an event handler on the document to determine if an element has been clicked, the collapse plugin will never get notified.
I've created a small example where a click handler on the pink .outer area replaces the green .inner area. 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.
$(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 .hidden is used to show the correct icon.
$(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 plugin to hide or show the correct icon. Use the shown.bs.collapse event to show the X icon, and the hidden.bs.collapse event to show the hamburger icon.
$(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>
这篇关于Bootstrap移动菜单图标更改为x关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
