0

嗨，我已经在 jquery 中创建了这个导航，但我开始对导航如何打开和关闭的过程感到困惑。如果你去这里：http ://hutchcreative.co.uk/rod/你可以看到一个工作演示。

如果您单击菜单图标（右上角），然后单击联系人，您会看到菜单图标变为 X。当您单击 X 时，我希望它只关闭联系人部分而不是整个导航。

我认为需要更改的主要领域是我的 jquery 的这一部分：

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

这是我所有的jquery

$('#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-59').click(function(){
    if($("#navigationWrapper").hasClass('whiteSection')){
        $('#contactWrapper').show();
        $('#contactWrapper').hide();
        $('#menuIcon').removeClass('closeIcon');
        $("#navigationWrapper").removeClass('whiteSection');
        $("#navigationWrapper").css("background-color", "rgba(0,0,0,0.3)");
    }else{
        $('#contactWrapper').hide();
        $('#contactWrapper').show();
        $("#navigationWrapper").addClass('whiteSection');
        $('#menuIcon').addClass('closeIcon');
        $("#navigationWrapper").css("background-color", "rgba(255,255,255,1)");
    }
});

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

这是我的html：

<nav id="navigationWrapper" class="nav">
    <div class="container">
        <div class="row">
            <div class="span5">
                <div id="logo"></div>
            </div>
            <div class="span7">
                <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="span12">
                            <h3><?php the_title(); ?></h3>
                        </div>
                        <div class="span6">
                            <h4><?php the_field('sub_heading'); ?></h4>
                            <?php the_content(); ?>
                        </div>
                        <div  class="span5 offset1">
                            <div id="emailAdd">
                                <a href="mailto:<?php the_field('email_address'); ?>"><?php the_field('email_address'); ?></a>
                            </div>
                            <div id="phoneAdd">
                                <?php the_field('phone_number'); ?>
                            </div>
                        </div>

                <?php endwhile;
                // reset post data (important!)
                wp_reset_postdata();
                ?>
        </div>
    </div>
</div>
4

1 回答 1

2

您有一个关闭导航包装器的#menuIcon 的切换单击事件处理程序；也许您可以检查 closeIcon 类，如果存在则不要关闭它：

$('#menuIcon').toggle(function(){
   $('#navigationWrapper ul').hide();
   $('#navigationWrapper ul').show();
   $("#navigationWrapper").css("background-color", "rgba(0,0,0,0.3)");
 },function(){
 if (!$(this).hasClass('closeIcon')) {
   $('#navigationWrapper ul').show();
   $('#navigationWrapper ul').hide();
   $("#navigationWrapper").css("background-color", "rgba(0,0,0,0.0)");
}
});
于 2013-08-03T08:50:25.323 回答