点击可以在图像上显示的两个菜单主菜单和搜索框同时打开?它应该打开一个菜单,关闭另一个

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

本文关键字:菜单 另一个 一个 搜索 在图像上显示 两个      更新时间:2023-09-26

打开两个菜单时的菜单图像

依次点击两个菜单,两个菜单都显示,而不是当我点击一个菜单关闭另一个。我怎么能做到呢?
 $('.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(函数(){

相关文章: