使用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