点击可以在图像上显示的两个菜单主菜单和搜索框同时打开?它应该打开一个菜单,关闭另一个
Clicking on both menu which can be shown on image Main menu and Search box opens at same time? It should open one menu and closes other
打开两个菜单时的菜单图像
依次点击两个菜单,两个菜单都显示,而不是当我点击一个菜单关闭另一个。我怎么能做到呢? $('.toggle-sm-nav, .js-toggle-sm-navigation').click(function(){
// Change button
$(this).children('span').toggleClass('glyphicon-align-justify icon-close-menu-cross2');
$('.sm-searchboxc').find('i').removeClass('active');
// Toggle menu on hamburger
$('.navcontainer').toggle();
$('.header-nav-container').toggleClass('brgropen');
if( $('.header-nav-container').hasClass('brgropen') ){
$('body').css('overflow', 'hidden');
} else {
$('body').css('overflow', 'visible');
}
});
// Focus search field when opened
$('.js-toggle-xs-search').on('click', function(){
$('.sm-searchboxc input#search').trigger('touchstart');
});
$('.sm-searchboxc input#search').on('touchstart', function(){
setTimeout(function(){
$('.sm-searchboxc input#search').focus();
}, 0);
});
HTML代码如下所示。
<div class="sm-navigation">
<div class="row">
<div class="sm-nav col-xs-1 col-sm-1 visible-sm">
<button class="btn btn-default js-toggle-sm-navigation toggle-sm-nav btn-sm" type="button">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
</div>
<div class="col-xs-12 col-sm-2 col-md-2 logocontainer">
<div class="site-logo">
<div class="content"><a href="/"><img src="/_ui/responsive/theme-blue/images/abc.svg"></a></div></div>
</div>
<div class="xs-nav col-xs-3 col-sm-3 visible-xs">
<button class="btn btn-default js-toggle-sm-navigation" type="button">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
</div>
<div class="xs-store-finder col-xs-3 visible-xs ">
<a href="/store-finder">
<button class="btn btn-default btn-sm" type="button">
<span class="glyphicon icon-store-locator"></span>
</button>
</a>
</div>
<div class="xs-search col-xs-3 visible-xs">
<button class="btn btn-default js-toggle-xs-search toggle-xs-search btn-sm" type="button">
<span class="glyphicon icon-search"></span>
</button>
</div>
<div class="searchboxc md-searchboxc col-xs-12 col-sm-5 col-md-5 hidden-xs hidden-sm">
<div class="site-search ui-front">
<form id="search-form" name="search-form" method="get" class="search-form ng-pristine ng-valid ng-scope ng-valid-maxlength" ng-submit="search.submit()" ng-controller="SearchController as search" action="/search/">
该图像如下所示。依次点击两个菜单,两个菜单都显示,而不是当我点击一个菜单关闭另一个。我怎么能做到呢?
是不是因为你嵌套了"点击搜索功能"
$ (' .js-toggle-xs-search ')。("点击",function () {
在导航点击功能中?
$('。toggle-sm-nav .js-toggle-sm-navigation").click(函数(){
相关文章:
- 如何激活下拉菜单:在一个元素上单击768px宽度下方,在另一个元素上将鼠标悬停在768px上方
- 下一个下拉菜单不能具有已在另一个下拉菜单中使用的值
- 如何创建根据另一个下拉菜单中的答案显示的下拉菜单
- 如何使用引导程序显示另一个导航栏而不是下拉菜单
- 引导两个响应菜单-单击另一个菜单按钮时折叠一个菜单
- 根据另一个下拉菜单中的选择更改第二个下拉菜单的值
- 带有父按钮的自动下拉菜单,可将您带到引导程序中的另一个页面
- 在 JQuery 中,如何将选择选项的子集从一个选择菜单复制到另一个选择菜单
- 我无法在我的网站上添加两个下拉菜单,而不会其中一个干扰另一个
- 将数据从选择菜单传递到另一个选择菜单 AJAX 编码点火器
- 如何使下拉菜单关闭,因为同一类的另一个下拉菜单在jquery / javascript中打开
- 动态添加下拉菜单,并根据一个下拉菜单中的选择在另一个下拉列表中选择选项
- 打开网站的另一个页面后,保持jquery下拉菜单打开
- 如何将菜单项绑定到同一解决方案中的另一个项目
- Jquery Accordion菜单:在另一个页面中保持所选菜单的扩展
- 根据另一个下拉菜单的选项值设置一个下拉菜单的文本
- 在从另一个下拉菜单中选择一个选项时动态加载下拉菜单
- 隐藏/显示下拉菜单取决于另一个选项
- 如何用Bootstrap获得一个漂亮的可折叠侧边栏菜单(另一个帖子)
- 根据另一个选择更新选择菜单