单击图标，弹出div，然后单击除div消失之外的元素

Question

.menuLeft是菜单图标。 .mainMenu是一个完整的div菜单弹出。 使用我的以下代码，一切正常，除非当mainMenu打开时，单击.menuLeft会让.mainMenu消失，然后再次弹出...

其他类型的方式非常受欢迎。欢呼声。

        $(document).ready(function(){
            $('.menuLeft').click(function() {
            $('.mainMenu').slideToggle('fast');

            });
            $(document).mouseup(function (e){
                var container = $('.mainMenu');

                if (!container.is(e.target)
                    && container.has(e.target).length === 0)
                {
                    container.hide('slow');
                }
            });
         });

HTML如下：

      <div class="headerMain mobile_disappear">
      <div class="container">
    <div class="menuLeft cur">
        <i class="fa fa-bars"></i>
    </div>
    <div class="mobilelogo">
        <?php echo '<a href="'. home_url() .'"><img src="' . get_stylesheet_directory_uri() . '/images/logo.gif" /></a>'; ?>

    </div>
    <div class="menuRight cur">
        <i class="fa fa-user"></i>
    </div>
</div>