j查询多个切换隐藏全部/只显示一个

jQuery multiple toggle hide all / show only one

本文关键字：显示 一个 全部 查询 隐藏      更新时间：2023-09-26

亲爱的程序员们，你好，

我有一个标题菜单，带有"搜索"，"语言"，"时间"切换功能。

关于显示单击

它工作正常，但我需要如果我单击"搜索"仅显示"搜索"并隐藏所有"语言"，"时间"。

我的代码

。.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' );
} );

和网页

<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>

如果我明白你的意思，你想在点击搜索时隐藏两个不同的元素，你想让其他元素隐藏？

通过使用 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();

我认为这会隐藏其他部分，我没有尝试过，但希望对您有用

$( '.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' );

} );

这应该可以解决问题。您可以使用此链接查看工作演示 工作演示

总结我做了什么。

  • 我在 html 中添加了一些文本作为链接（仅用于测试）
  • 我添加了.hide() Jquery 类以隐藏点击事件之前的三个包装类
  • 我为wrapper.toggle('slow')添加了一些动画

  • 我把wrapper.toggleClass('slow')改成了wrapper.toggle('slow')

    $（'.

    search-box-wrapper'）.hide（）; $（'.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');
});
相关文章：