javascript - 使用 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正在定义要固定的位置，这会导致将其放置在其他元素上方的一层。

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

.equipsell{
宽度:285 像素；
}

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

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