jquery导航问题，必须双击

我有一个导航，您可以在这里看到：

如果你点击菜单图标（右上角），它会显示黑暗的导航菜单。如果单击“联系我们”，则会出现白色的“联系我们”部分。然后单击菜单图标关闭所有内容。如果您再次单击菜单图标，它会像以前一样打开黑暗导航，但如果您单击contact，它不会打开。您必须再次单击它以打开白色联系人部分。有人知道如何解决这个问题吗

以下是我的jquery：

jQuery(function($) {    
$('#menuIcon').toggle(function(){
       $('#navigationWrapper ul').hide();
       $('#navigationWrapper ul').show();
       $("#navigationWrapper").css("background-color", "rgba(0,0,0,0.3)");
},function(){
       $('#navigationWrapper ul').show();
       $('#navigationWrapper ul').hide();
       $("#navigationWrapper").css("background-color", "rgba(0,0,0,0.0)");
});

$('#menu-item-56').toggle(function(){
       $('#contactWrapper').hide();
       $('#contactWrapper').show();
       $("#navigationWrapper").addClass('whiteSection');
       $("#navigationWrapper").css("background-color", "rgba(255,255,255,1)");
},function(){
       $('#contactWrapper').show();
       $('#contactWrapper').hide();
       $("#navigationWrapper").removeClass('whiteSection');
       $("#navigationWrapper").css("background-color", "rgba(0,0,0,0.3)");
});

$("#menuIcon").click(function ( event ) {
    event.preventDefault();
    $('#contactWrapper').hide();
    $("#navigationWrapper").removeClass('whiteSection');
    if($('#contactWrapper').is(":visible")) {  $('#contactWrapper').hide(); }
});

}))

这是我的html

<nav id="navigationWrapper">
    <div class="container">
        <div class="row">
            <div class="span6">
                <div id="logo"></div>
            </div>
            <div class="span6">
                <div id="menuIcon"></div>
                <ul>

                    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false, 'menu_class' => 'menu', 'menu_id' => 'menu', 'depth' => 1, 'fallback_cb' => '', 'items_wrap' => '%3$s' ) ); ?>

                    <?php get_template_part( 'part', 'social' ); ?>

                </ul>
            </div>
        </div>
    </div>
</nav>

<div id="contactWrapper" >
    <div class="container">
        <div class="row">
            <?php
                    // query for the about page
                    $your_query = new WP_Query( 'pagename=contact' );
                    // "loop" through query (even though it's just one page) 
                    while ( $your_query->have_posts() ) : $your_query->the_post(); ?>
                        <div class="span6">
                            <?php the_title(); ?>
                            <?php the_content(); ?>
                        </div>
                        <div class="span6">
                            <?php the_field('email_address'); ?>
                        </div>
                <?php endwhile;
                // reset post data (important!)
                wp_reset_postdata();
                ?>
        </div>
    </div>
</div>

这是因为您使用的是
.toggle（）event
（顺便说一下，它已被弃用）。单击菜单不是通常隐藏联系人菜单的切换功能

请尝试以下方法：

$('#menu-item-56').click(function(){
    if($("#navigationWrapper").hasClass('whiteSection')){
        $('#contactWrapper').show();
        $('#contactWrapper').hide();
        $("#navigationWrapper").removeClass('whiteSection');
        $("#navigationWrapper").css("background-color", "rgba(0,0,0,0.3)");
    }else{
        $('#contactWrapper').hide();
        $('#contactWrapper').show();
        $("#navigationWrapper").addClass('whiteSection');
        $("#navigationWrapper").css("background-color", "rgba(255,255,255,1)");
    }
});

它是关闭还是打开菜单取决于它是否有类，但我无法测试它

当然，代码可以优化，但这不是真正的问题
 如果你只发布了一个相关代码的链接，而不是一大块好的HTML和一个指向你网站的链接，那会更有帮助。是的，从1.8开始就不推荐了，在1.9中删除了，但是他使用的是1.8.3，所以它仍然在那里。非常感谢你！您是否可以分享一种更好的方式来编写代码，从而优化它？对不起，我对jquery还是很陌生。谢谢使其在1分钟内变为逆变器（如果是，请在课程开始前移除
！
）