为什么这个jQuery选择器对我不起作用？

问：

每次单击网页上除特定对象以外的任何内容时，我都尝试启动一个操作（菜单“树水平线”按钮，类名为“navbutton”），如下所示：

<div class="test">
    <nav id="menu" class="pdng-lr">
        <div class="navbutton">
            <span class="top"></span>
            <span class="middle"></span>
            <span class="bottom"></span>
        </div>
    </nav>
</div>

CSS：

#menu .navbutton
{
    display:none;
}

@media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait)
{
.pdng-lr
{
    padding:0px;
}

#menu .navbutton
{
    display:block;
    width:25px;
    height:38px;
    margin-top:40px;
    margin-left:calc(100% - 40px);
    border:none;
    cursor:pointer;
}

#menu .navbutton span
{
    display:inline-block;
    float:left;
    min-height:6px;
    width:100%;
    margin:2px 0px;
    background-color:#cccccc;
    -webkit-transition:all 0.15s linear;
    -moz-transition:all 0.15s linear;
    -o-transition:all 0.15s linear;
    transition:all 0.15s linear;
}

#menu .navbutton .top
{
    margin-top:6px;
}
}

我认为这个脚本可以工作：

jQuery('div:not(".navbutton")').click(function(){
    // just to test if it works
    alert();
});

...但事实并非如此：当我单击.nav按钮时，它仍然会触发操作（警报窗口打开）！

谁能告诉我代码有什么问题或如何让它工作？

我试图在 jFiddle 上让它尽可能简单，但它仍然无法正常工作，请参阅：https://jsfiddle.net/eygka3cn/3/