jQuery的多個觸發隱藏全部/只顯示一個

Question

您好親愛的程序員，

我有一個標題菜單，用「搜索」，「語言」，「時間」切換功能。

關於顯示onClick它工作正常，但我需要如果我點擊「搜索」只顯示「搜索」並隱藏所有「語言」，「時間」。

我的代碼

的.js

$('.search-toggle').on('click.twentyfourteen', function(event) { 
     var that = $(this), 
      wrapper = $('.search-box-wrapper'); 

     that.toggleClass('active'); 
     wrapper.toggleClass('hide'); 

     if (that.is('.active') || $('.search-toggle .screen-reader-text')[0] === event.target) { 
      wrapper.find('.search-field').focus(); 
     } 
    }); 

    $('.language-toggle').on('click.twentyfourteenn', function(event) { 
     var that = $(this), 
      wrapper = $('.language-box-wrapper'); 

     that.toggleClass('active'); 
     wrapper.toggleClass('hide'); 

});  

     $('.time-toggle').on('click.twentyfourteennn', function(event) { 
     var that = $(this), 
      wrapper = $('.time-box-wrapper'); 

     that.toggleClass('active'); 
     wrapper.toggleClass('hide'); 

}); 

和HTML

<div class="search-toggle"> 
      <a href="#search-container" class="screen-reader-text"><?php _e('Search', 'twentyfourteen'); ?></a> 
     </div> 

     <div class="language-toggle"> 
      <a href="#language-container" class="language-screen-reader-text"><?php _e('Search', 'twentyfourteenn'); ?></a> 
     </div> 

    <div class="time-toggle"> 
      <a href="#search-container" class="screen-reader-text"><?php _e('Search', 'twentyfourteennn'); ?></a> 
     </div> 

    <div id="search-container" class="search-box-wrapper hide"> 
     <div class="search-box"> 
      <?php get_search_form(); ?> 
     </div> 
    </div> 

     <div id="language-container" class="language-box-wrapper hide"> 
     <div class="language-box"> 
     language 
     </div> 
    </div> 

      <div id="time-container" class="time-box-wrapper hide"> 
     <div class="time-box"> 
     time 
     </div> 
    </div> 

Answer 1

如果我明白你的意思，你要隱藏的兩個不同的元素時，點擊搜索你想要的他人隱瞞？

使用添加可以族元素在一起，然後添加類以顯示或隱藏：

$('#element1_id').add('#element2_id').removeClass('show'); 
$('#element1_id').add('#element2_id').addClass('hide'); 

或者只是向上伸直與jQuery隱藏起來。

$('#element1_id').add('#element2_id').hide(); 

你也可以給你想隱藏起來共同類名稱的元素：

即：撥動

，那麼你可以簡單地使用類切換來隱藏他們：

$('.toggle').removeClass('show'); 
$('.toggle').addClass('hide'); 

或

$('.toggle').hide(); 

Answer 2

我認爲這將隱藏其他部分，我還沒有試過，但希望將工作的ü

$('.search-toggle').on('click.twentyfourteen', function(event) { 
     var that = $(this), 
      wrapper = $('.search-box-wrapper'); 

     that.toggleClass('active'); 
     $('.search-box-wrapper').hide(); 
$('.time-box-wrapper').hide(); 
$('.language-box-wrapper').hide(); 
     if (that.is('.active') || $('.search-toggle .screen-reader-text')[0] === event.target) { 
      wrapper.find('.search-field').focus(); 
     } 
    }); 

    $('.language-toggle').on('click.twentyfourteenn', function(event) { 
     var that = $(this), 
      wrapper = $('.language-box-wrapper'); 

    $('.search-box-wrapper').hide(); 
$('.time-box-wrapper').hide(); 
$('.language-box-wrapper').hide(); 
     that.toggleClass('active'); 


});  

     $('.time-toggle').on('click.twentyfourteennn', function(event) { 
     var that = $(this), 
      wrapper = $('.time-box-wrapper'); 
$('.search-box-wrapper').hide(); 
$('.time-box-wrapper').hide(); 
$('.language-box-wrapper').hide(); 
     that.toggleClass('active'); 


}); 

Answer 3

這應該解決的問題。您可以使用此鏈接查看工作演示Working Demo

我做了什麼的總結。

• 我加了一些文字鏈接在HTML（只是用於測試）
• 我加.hide() jQuery的類單擊事件
• 我添加了動畫的一點點前隱藏三大包裝類wrapper.toggle('slow')

• 我改變wrapper.toggleClass('slow')到wrapper.toggle('slow')

  $（ '搜索箱包裝。'）隱藏（）。 $（'。language-box-wrapper'）。hide（）; $（'。time-box-wrapper'）。hide（）;

  $('.search-toggle').on('click.SearchLink', function (event) { 
      var that = $(this), 
       wrapper = $('.search-box-wrapper'); 
      that.toggleClass('active'); 
      wrapper.toggle('slow'); 
  
      if (that.is('.active') || $('.search-toggle .screen-reader-text')[0] === event.target) { 
       wrapper.find('.search-field').focus(); 
      } 
  }); 
  
  $('.language-toggle').on('click.LangLink', function (event) { 
      var that = $(this), 
       wrapper = $('.language-box-wrapper'); 
      that.toggleClass('active'); 
      wrapper.toggle('slow'); 
  
  }); 
  
  $('.time-toggle').on('click.TimeLink', function (event) { 
      var that = $(this), 
       wrapper = $('.time-box-wrapper'); 
      that.toggleClass('active'); 
      wrapper.toggle('hide'); 
  });