Question

Hello亲爱的程序员，

我有一个标题菜单，＆＃34;搜索＆＃34;，＆＃34;语言＆＃34;，＆＃34;时间＆＃34;切换功能。

关于显示onClick它可以正常工作，但我需要如果我点击＆＃34;搜索＆＃34;仅显示＆＃34;搜索＆＃34;并隐藏所有＆＃34;语言＆＃34;，＆＃34;时间＆＃34;。

我的代码

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

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

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

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

$（＆＃39; .search-盒包装＆＃39）。隐藏（）; $（＆＃39;。外语盒，包装＆＃39;）隐藏（）。 $（＆＃39;。时间盒的包装器＆＃39）隐藏（）;

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

jQuery多个切换隐藏全部/仅显示一个

3 个答案: