Question

$('body .note-logo').click(function(){
    $('body').css({
        'margin-left':'-260px'
    });
    $('nav').css({
        'right':'0',
        'display':'block'
    });
});
$('body:not(.note-logo)').click(function(){
    $('body').css({
        'margin-left':'0'
    });
    $('nav').css({
        'right':'-260px',
        'display':'none'
    });
});

点击.note-logo后，nav会滑入，然后点击body时，导航会滑出，正文将返回margin-left:0。

这似乎只会触发'body:not(.note-logo)'，所以我无法完全拉出nav。有人可以帮忙吗？

<nav>
            <div class="wrap">
                <ul id="nav">
                    <li><a href="#nowhere" title="Home">Home</a></li>
                    <li><a href="#nowhere" title="About">About</a></li>
                    <li><a href="#nowhere" title="Services">Services</a></li>
                    <li><a href="#nowhere" title="Contact">Contact</a></li>
                    <li><a href="#nowhere" title="Pellentesque">Pellentesque</a></li>
                    <li><a href="#nowhere" title="Aliquam">Aliquam</a></li>
                    <li><a href="#nowhere" title="Morbi">Morbi</a></li>
                </ul><!-- /#nav  -->
            </div><!-- /.wrap -->
        </nav><!-- /nav -->
        <div class="note-logo">
                  Logo
        </div>

        <section id="main"> 
            <div class="wrap">
                           Page content
            </div><!-- /.wrap -->
        </section><!-- /main -->

Answer 1

单击徽标时，必须停止点击冒泡到正文。

这称为事件传播，read more about it here。

$('.note-logo').click(function(e){ // <-- Note the 'e'

    e.stopPropagation(); // Don't click the 'body' behind the logo

    console.log('logo clicked!')
    return false; // For good measure, don't follow the link on the logo
});

Answer 2

添加stopPropagation将解决您的问题：

$('body .note-logo').click(function(e){ // Note the "e"

    e.stopPropagation();

    $('body').css({
        'margin-left':'-260px'
    });
    $('nav').css({
        'right':'0',
        'display':'block'
    });
});

DEMO

JQuery API

Answer 3

我有类似的问题，我最终只使用jQuery淡入淡出。它产生了很好的效果。

How to stop page from scrolling for a mobile website?

单击徽标时jQuery滑动导航

3 个答案: