使用 JQuery 切换元素会使父元素的一部分消失答案

【问题标题】：Toggling an element with JQuery makes part of the parent element dissapear使用 JQuery 切换元素会使父元素的一部分消失
【发布时间】：2016-12-02 02:44:25
【问题描述】：

我正在尝试使用 jquery 制作一个导航栏，相当简单，单击导航图标会在侧面显示一个菜单，但是我需要在单击其中一个选项后出现一个子菜单，在这种情况下“我们出售的设备”选项卡。当我单击选项卡并将菜单切换为可见时，我对此没有任何问题，但是，它下面的所有选项卡都变得不可见（我假设它们不会重新定位到现在可见的元素下方）。有人可以向我解释为什么标签没有为新的列表元素腾出空间。代码如下。

jscript

$('.icon-menu').click(function() {

  $('.menu').animate({
    right: '0px'
    }, 200);
  $('.equipsell').hide();
});

$('.menu-exit').click(function() {
  $('.menu').animate({
    right: '-285px'
  }, 200);
  $('.equipsell').hide();
});

$('.equipment').click(function() {
  $('.equipsell').toggle();
});

HTML

<header>
    <div class="menu">
    <img src="img/menu-exit.png" class="menu-exit" alt="Exit Button">
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li class="equipment"><a href="#">Equipment We Sell</a></li>
        <div class="equipsell">
            <li><a href="inventis_audio.html">Audiometers by Inventis</a></li>
            <li><a href="inventis_middle.html">Middle Ear Analyzers by Inventis</a></li>
            <li><a href="inventis_delfino.html">Delfino Video Otoscopes by Inventis</a></li>
            <li><a href="inventis_daisy.html">Daisy by Inventis</a></li>
            <li><a href="inventis_trumpet.html">Trumpet REM by Inventis</a></li>
        </div>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
    </div>

    <div class="main-menu">
    <a href="index.php"><p>Test<br>Website</p></a>
    <img src="img/bars.jpg" class="icon-menu" alt="Menu">
    </div>

</header>

因此，当您从上方单击设备类/列表项时，它会降低“菜单”类，但会覆盖联系我们列表项。

编辑

忘记包含 css。

CSS

    /***** NAV *****/

    header {
        background-color: #093;
        padding-bottom: 5px;
    }

    header p {
        display: inline-block;
        font-size: 1.35em;
        margin: 10px 0 5px 15px;
        font-weight: bold;
        padding: 2px;
        border: 3px solid black;
    }

    header a {
        color: black;
    }

    .icon-menu {
        width: 35px;
        height: 35px;
        float: right;
        margin: 20px 15px 0 0;
        display: inline-block;
    }

    .menu {
        background: #00882B;
        right: -285px;
        height: 100%;
        position: fixed;
        width: 285px;
    }

    .menu-exit {
        width: 35px;
        height: 35px;
        margin-left: 48%;
    }

    .menu ul {
        border-top: 1px solid #636363;
        list-style: none;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    .menu li {
        border-bottom: 1px solid #636363;
        font-family: 'Open Sans', sans-serif;
        line-height: 45px;
        padding-bottom: 3px;
        padding-left: 20px;
        padding-top: 3px;
        color: #000000;
        font-size: 15px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .menu a {
        color: #000000;
        font-size: 15px;
        font-weight: 800;
        text-decoration: none;
        text-transform: uppercase;
    }

    .active-menu{
        position: absolute;
    }

    .equipsell{
        width: 285px;
        position: fixed;
    }

    .equipsell li {
        margin: 0;
        padding: 0;
        line-height: 2.5;
        background-color: #c90;
    }

    .equipsell a{
        color: white;
        padding: 0;
        margin: 0;
    }

    .bottom-half li {
        background-color: #00882B;
    }

    /***************/

【问题讨论】：

请提供 css 或 JsFiddle
唯一允许作为 UL 元素的直接子元素的标记是 LI，因此您应该将您的装备 div 移动到 LI。 developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

标签： javascript jquery html

【解决方案1】：

您的类.equipsell 将位置定义为fixed，这导致将在其他元素上方放置一层。

我猜想创建预期结果的代码是：

.equipsell{ width: 285px; }

JSFiddle 更新：https://jsfiddle.net/rc8br5oe/

更多关于 CSS 职位：http://www.w3schools.com/cssref/pr_class_position.asp

【讨论】：