jQuery UI（切換）下拉菜單重疊到其他菜單

菜單重疊到其他菜單上。當您點擊第一個菜單「關於我們」時，它會打開。但是當您點擊「產品」時，「關於我們」不會關閉，因此「產品」菜單與「關於我們」菜單重疊。jQuery UI（切換）下拉菜單重疊到其他菜單

HTML

<body> 
<nav> 
    <ul class="nav"> 
     <li><a href="#"></a></li> 
     <li class="menuabout"><a>About</a> 
      <ul class="subnav01 clearfix"> 
        <li><a href="#">About One</a></li> 
        <li><a href="#">About Two</a></li> 
        <li><a href="#">About Three</a></li> 
        <li><a href="#">About Four</a></li> 
        <li><a href="#">About Five</a></li> 
        <li><a href="#">About Six</a></li> 
      </ul> 
     </li> 
     <li class="menuproducts"><a>Products</a> 
      <ul class="subnav02 clearfix"> 
        <li><a href="#">Product One</a></li> 
        <li><a href="#">Product Two</a></li> 
        <li><a href="#">Product Three</a></li> 
        <li><a href="#">Product Four</a></li> 
        <li><a href="#">Product Five</a></li> 
        <li><a href="#">Product Six</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul>    
</nav>

CSS

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    width: 100%; 
    height: 100%; 
    background: darkgray; 
} 

.nav { 
    width: 100px; 
    position: absolute; 
    top: 30px; 
    right: 20px; 
    list-style: none; 
} 

.nav li { 
    margin: 0 0 10px 0; 
    font-family: Helvetica; 
    font-size: 11px; 
    text-align: right; 
    text-transform: uppercase; 
    line-height: 1; 
} 

.nav li:nth-child(5) { 
    margin: 0; 
} 

.nav li a { 
    height: 10px; 
    padding: 10px 10px 10px 0; 
    color: white; 
    text-decoration: none; 
    display: block; 
    cursor: pointer; 
    position: relative; 
} 

.subnav01, .subnav02 { 
    width: 300px; 
    position: absolute; 
    top: 29px; 
    left: -300px; 
    display: none; 
} 
.subnav01 li, .subnav02 li { 
    width: 150px; 
    margin: 0; 
    text-align: center; 
    float: left; 
} 

.subnav01 li a, .subnav02 li a { 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
    background: dodgerblue; 
    height: 10px; 
    display:block; 
} 

.subnav01 li a:hover, .subnav02 li a:hover { 
    background: dimgray; 
} 

.clearfix:before, 
.clearfix:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.clearfix:after { 
    clear: both; 
} 

.active > a { 
    background: dodgerblue !important; 
}

JS/jQuery的/ jQuery的UI/

jQuery(document).ready(function($){ 
    $(".menuabout").on("click", function(){ 
     $(".subnav01").toggle ("slide", {direction: "right"}, "slow"); 
     $(this).toggleClass("active"); 
    }); 
    $(".menuproducts").on("click", function(){ 
     $(".subnav02").toggle ("slide", {direction: "right"}, "slow"); 
     $(this).toggleClass("active"); 
    }); 
});

來源

2012-11-24 IAMTHESTIG

好吧，您可以嘗試這樣的事情。我已經改變了你類menu所有菜單的元素，所以你可以使用一個功能爲所有這些

JSFIDDLE

jQuery(document).ready(function($){ 
    $(".menu").on("click", function(){ 
     deactivateAll(this); 
     toggle(this); 
    }); 

    function deactivateAll(current) { 
     $("li").each(function(index, elem){ 
      if (elem != current && $(elem).hasClass("active")) { 
       toggle(elem); 
      } 
     }); 
    } 

    function toggle(elem) { 
     $(elem).find("ul").toggle ("slide", {direction: "right"}, "slow"); 
     $(elem).toggleClass("active"); 
    } 
});

來源

2012-11-24 15:27:10

謝謝！有沒有辦法向左滑動然後隱藏不需要的菜單？因爲當你再次點擊它隱藏菜單時，它只是重複動畫，但仍然顯示菜單。 – IAMTHESTIG

我明白你的意思了。看看http://jsfiddle.net/ncTQr/35/ - 我已經添加了一個檢查elem！= current。我也更新了一個答案 –

第二次點擊時它仍然不隱藏菜單。例如，我點擊「產品」，然後我想再次隱藏它，所以我應該再次單擊它，但它不會隱藏。 – IAMTHESTIG

這工作：（Fiddle）

jQuery(document).ready(function($){ 
    $(".menuabout").on("click", function(){ 
     reset(); 
     $(".subnav01").toggle ("slide", {direction: "right"}, "slow"); 
     $(this).toggleClass("active"); 
    }); 
    $(".menuproducts").on("click", function(){ 
     reset(); 
     $(".subnav02").toggle ("slide", {direction: "right"}, "slow"); 
     $(this).toggleClass("active"); 
    }); 
    function reset() { 
     $("ul.nav li").removeClass("active"); 
     $("ul.nav li ul").hide();   
    } 
});

而且你可以重構你的代碼了一點，所以它不repat這麼多。添加更多的根元素導航元素將意味着每次都複製您的代碼:)

來源

2012-11-24 14:02:42 refugene

非常感謝你對我的幫助！但有沒有辦法，當我點擊例如「關於我們」菜單和「產品」菜單是可見的，「關於我們」菜單隱藏/向左滑動像我上面的例子？我的意思是，如果你點擊「關於我們」兩次，它應該滑向左側？ – IAMTHESTIG

我創建了更多的課程，因爲當我點擊「產品」時，「關於我們」的菜單也會打開。我不知道如何在所有下拉菜單中只使用1個課程。 – IAMTHESTIG

請參閱羅馬的答案。他很好地重構了它，並且滑動菜單而不是隱藏 – refugene

jQuery UI（切換）下拉菜單重疊到其他菜單

回答

相關問題