jQuery多个切换隐藏全部/仅显示一个
您好，亲爱的程序员，
我有一个标题菜单，有“搜索”，“语言”，“时间”切换功能。
关于显示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> 回答 3
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用户
发布于 2014-03-29 19:43:14
我认为这将隐藏其他部分，我还没有尝试过，但希望能为你工作
$( '.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' );
} ); Stack Overflow用户
发布于 2014-03-30 05:27:48
这应该可以解决问题。您可以使用此链接查看工作演示
我所做工作的摘要。
- 我在html中添加了一些文本作为链接(仅用于测试)
- 我添加了
.hide()Jquery类，以便在单击事件之前隐藏三个包装类 - 我在html中添加了一些动画将
wrapper.toggleClass('slow')更改为wrapper.toggle('slow')
$('.search-box-wrapper').hide()；$('.language-box-wrapper').hide()；$('.time-box-wrapper').hide()；
$(‘.search-.on’).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- === -event.target’)=== event.target) {wrapper.find(‘.search-===’).focus()；} })；$(‘.language-.on’) wrapper (‘click.langlink’，function (event) { var that = $(this)，wrapper= $('.language-box-wrapper')；that.toggleClass('active')；wrapper.toggle('slow')；})；$(‘.time-.on’).on(‘点击时间链接’，函数(事件){ var that = $(this)，wrapper = $('.time-box-wrapper')；that.toggleClass('active')；wrapper.toggle('hide')；});
https://stackoverflow.com/questions/22729986
复制相似问题
腾讯云开发者
