Question

我试图用jquery创建一个导航栏，相当简单，单击导航图标会在侧面显示一个菜单，但是我需要在单击其中一个选项后显示一个子菜单，在此我们销售的＆＃34;设备＆＃34;标签。我没有问题，因为当我单击选项卡并将菜单切换为可见时，它下面的所有选项卡都变得不可见（我假设它们不会重新定位到现在可见的元素下面）。有人可以向我解释为什么选项卡不会为新列表元素腾出空间。代码如下。

的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>

因此，当您从上方单击设备类/列表项时，它会降低＆＃34;菜单＆＃34;课程，但掩盖了联系我们列表项目。

修改

忘记包括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

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

1 个答案: