使用JQuery切换元素会使父元素的一部分不可见

Question

我正试图用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;
    }
    /***************/

Answer 1

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

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

.equipsell{ width: 285px; }

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

有关CSS职位的更多信息：http://www.w3schools.com/cssref/pr_class_position.asp