jquery - 单击响应式 jQuery 汉堡包图标 "disappears"

Question

我正在从头开始制作我的第一个响应式菜单。我的工具是 jQuery、HTML 和 CSS。

我这里有一个 fiddle :http://jsfiddle.net/DznpQ/9/

问题是，一旦您单击汉堡包菜单图标，它就会“消失”。检查来源讲述了一个不同的故事:汉堡包图标仍然存在，只是移动了这么远，不再可见。

我不确定为什么图标会移动，或者我可以修复它。一如既往，感谢您的帮助。

HTML:

<div class="header">
    <!-- Container -->
    <div class="headerContainer container">
        <!-- Logo -->
        <div class="logo col-md-3 alpha" style="
    width: 206px;
    margin-right: 0;
"> <a href="/"><img id="p_lt_Logo_Logo_ucEditableImage_imgImage" src="http://placehold.it/206x63" alt=""></a>

        </div>
        <!--/ End Logo -->
        <!-- Navigation -->
        <div class="navigation col-md-9 omega">
            <div class="mobile-menu">
                <img src="https://cdn4.iconfinder.com/data/icons/miu/22/editor_list_view_hambuger_menu-48.png" alt="menu" class="pull-right hamburger">
            </div>
            <ul id="menuElem" class="CMSListMenuUL" style="display: none;">
                <li class="CMSListMenuHighlightedLI">   <a class="CMSListMenuLinkHighlighted" href="/">Home</a>

                </li>
                <li class="CMSListMenuLI">  <a class="CMSListMenuLink" href="/About">About</a>

                </li>
                <li class="CMSListMenuLI">  <a class="CMSListMenuLink" href="/Contact">Contact</a>

                </li>
            </ul>
        </div>
        <!--/ End Navigation -->
    </div>
    <!--/ End Container -->
</div>

CSS

    ol, ul {
        list-style: none;
    }
    .headerContainer {
        position: relative;
    }
    .mobile-menu {
        display:block;
        position: absolute;
        bottom: 30px;
        right: 5px;
    }
    .hamburger:hover {
        -webkit-filter: drop-shadow(3px 3px 3px #3C3C3C);
        filter: drop-shadow(3px 3px 3px #3C3C3C);
    }
    ul.navigation {
        height: auto;
    }
    .navigation li {
        float: none;
        width: 100%;
        margin: 0;
    }
    ul.navigation a {
        line-height: 40px;
    }
    .navigation ul {
        float: none;
        position: relative;
        background: url("http://mcbeev.com/MBV/media/layout/background_header.jpg") repeat-x;
    }
    .navigation {
        width: 100%;
    }
    .headerContainer {
        background-color: #23518f;
    }
}

jQuery

jQuery(function ($) {
    $('.mobile-menu').click(function () {
        $('#menuElem').toggle();
    });
});

Answer 1

声明 top 值而不是使用 bottom

.mobile-menu {
    display:block;
    position: absolute;
    right: 5px;
    top: 18px;
}