响应性jQuery汉堡图标“；“消失”；点击

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

我这里有一把小提琴：

问题是一旦你点击汉堡菜单图标，它就会“消失”。检查来源告诉我们一个不同的故事：汉堡包图标仍然在那里，它只是移动了这么远，不再可见

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

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>

jQuery

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

---

声明顶部值，而不是使用底部值

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

---

声明顶部值，而不是使用底部值

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

---

它并没有消失，只是在标题栏下方重新定位，并被列表覆盖。您的HTML结构问题需要一些帮助。我会把“汉堡包”和徽标一起放在顶部的“标题栏”中，并将内容（UL）放在其下方的一个单独的分区中。它不会消失，只是重新定位在标题栏下方并被列表覆盖。您的HTML结构问题需要一些帮助。我会把“汉堡包”和标志一起放在顶部的“标题栏”中，并将内容（UL）放在它下面的一个单独的分区中。