2016-08-15 3 views
1

1つのメニューをクリックするとメニューが表示され、十字が表示されますが、検索メニューをクリックすると同じメニューにも表示され、十字アイコンが表示されます。jqueryの別のメニューをクリックして1つのメニューとそのアイコンを閉じるにはどうすればいいですか?

メニューをクリックして別のメニューを閉じ、アイコンをデフォルトに変更したいとします。

$('.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/"> 
+0

は、あなたのHTMLコードを提供するメニューに関連しますか? –

+0

あなたの迅速な対応に感謝します。高く評価 – user3636197

答えて

-1
 if ($('.xs-search > button > span').hasClass('icon-close-menu-cross2')) { 
     $('.xs-search > button > span').removeClass('icon-close-menu-cross2').addClass('icon-search'); 
     $('.sm-searchboxc input#search').hide(); 
     $('.searchboxc').find('.site-search').removeClass('active'); 
     } 
     $('.navcontainer').toggle(); 
     $('.header-nav-container').toggleClass('brgropen'); 
     if ($('.header-nav-container').hasClass('brgropen')) 

     $('.js-toggle-xs-search').on('click', function() { 
     var width = $(window).width(); 
     if (width <= 968) { 
      if ($('.sm-searchboxc input#search').hide()) { 
      $('.sm-searchboxc input#search').show(); 
      } else if ($('.xs-search > button > span').hasClass('icon-close-menu-cross2')) { 
      $('.sm-searchboxc input#search').trigger('touchstart'); 
      } 
      if ($('.header-nav-container').hasClass('brgropen')) { 
      $('.toggle-sm-nav, .js-toggle-sm-navigation').children('span').toggleClass('glyphicon-align-justify icon-close-menu-cross2'); 
      $('.navcontainer').hide(); 
      $('.header-nav-container').removeClass('brgropen'); 
      } 
     } else { 
      $('.sm-searchboxc input#search').trigger('touchstart'); 
     } 
     }); 
     $('.sm-searchboxc input#search').on('touchstart', function() { 
      setTimeout(function() { 
        $('.sm-searchboxc input#search').focus(); 
関連する問題