jQuery多个切换隐藏全部/仅显示一个
jQuery多个切换隐藏全部/仅显示一个
提问于 2014-03-29 18:41:50
您好，亲爱的程序员，
我有一个标题菜单，有“搜索”，“语言”，“时间”切换功能。
关于显示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> Stack Overflow用户
发布于 2014-03-29 19:27:37
如果我理解你的意思，你想在点击搜索时隐藏两个不同的元素，你想隐藏其他元素吗？
通过使用add，您可以将元素组合在一起，然后添加要显示或隐藏的类：
$('#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();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22729986
复制相关文章
相似问题
腾讯云开发者
