從頂部菜單，並推下頁面

我試圖製作一個菜單，單擊時會將頁面向下推並顯示特定的子菜單。

菜單應該在頁面上方，高度爲50px。如果我使用高度，內容將不會被推下。

當我點擊第一個鏈接，我應該得到該鏈接的子菜單。如果我按下第二個鏈接，則應該用第二組子菜單替換第一個子菜單。

現在這一切都搞砸了，我不能得到它的工作。我對JavaScript沒有太多瞭解，如你所見：

jQuery(document).ready(function(){ 
    jQuery(".menu-item-has-children").click(function(){ 
     jQuery(this).children(".sub-menu").slideToggle(); 
    }); 
});

謝謝你所有的時間。

https://jsfiddle.net/tjkr6L08/

來源

2017-02-22 Kal-El

在https://jsfiddle.net/tjkr6L08/1/

的Javascript

jQuery(document).ready(function() { 
    jQuery(".menu-item-has-children").click(function() { 

    jQuery(".opened").slideUp().removeClass("opened"); 
    jQuery(this).children(".sub-menu").slideToggle().addClass("opened"); 

    }); 
});

CSS看看

.sub-menu { 
    display: none; 
    position:absolute; 
    top:40px; 
    left:0; 
    right:0; 
}

所以你的問題是，50％的CSS，50％的JavaScript。你想要的是參考以前打開的子菜單，所以你可以關閉它。爲了使事情正確對齊，菜單可以是絕對的;

所以上述是最快的解決方案 - 可能不是最好的，但會給你一個想法如何繼續。

來源

2017-02-22 15:17:42 nbo

感謝您對快速響應的文檔，但我得到更加困惑現在。 –

可以使用自舉類崩代替Java腳本觸發一次看到引導Collapse

.menu-menu-top-container { 
 
    width: 100%; 
 
    text-align: center; 
 
    position: static; 
 
    height: 50px; 
 
} 
 

 
.menu-top li { 
 
    display: inline-block; 
 
    padding:5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="menu-top"> 
 
    <div class="menu-menu-top-container"> 
 
    <ul id="menu-menu-top" class="menu"> 
 
     <li><a href="#" data-toggle="collapse" data-target="#Companie">Companie</a> 
 
     <li><a href="#" data-toggle="collapse" data-target="#Cariere"> Cariere</a> 
 
     <li id="menu-item-457" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-457"><a href="contact/index.html">Contact</a></li> 
 
\t </ul> 
 

 
    <div id="Companie" class="collapse"> 
 
     <ul class="sub-menu"> 
 
      <li id="menu-item-450" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-450"><a href="companie/echipa-copy/index.html">Echipa</a></li> 
 
      <li id="menu-item-451" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-451"><a href="companie/echipa/index.html">Echipa</a></li> 
 
      <li id="menu-item-452" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-452"><a href="companie/implicare-sociala/index.html">Implicare socială</a></li> 
 
      <li id="menu-item-453" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-453"><a href="companie/misiune-valori/index.html">Misiune și Valori</a></li> 
 
      <li id="menu-item-454" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-454"><a href="companie/calitate-si-certificari/index.html">Calitate și certificări</a></li> 
 
      <li id="menu-item-455" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-455"><a href="companie/despre-noi/index.html">Despre noi?</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id="Cariere" class="collapse"> 
 
    <ul class="sub-menu"> 
 
      <li id="menu-item-450" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-450"><a href="companie/echipa-copy/index.html">Echipa Copy</a></li> 
 
      <li id="menu-item-451" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-451"><a href="companie/echipa/index.html">Echipa</a></li> 
 
      <li id="menu-item-452" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-452"><a href="companie/implicare-sociala/index.html">Implicare socială</a></li> 
 
      <li id="menu-item-453" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-453"><a href="companie/misiune-valori/index.html">Misiune și Valori</a></li> 
 
      <li id="menu-item-454" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-454"><a href="companie/calitate-si-certificari/index.html">Calitate și certificări</a></li> 
 
      <li id="menu-item-455" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-455"><a href="companie/despre-noi/index.html">Despre noi?</a></li> 
 
     </ul> 
 
    </div> 
 
</div> 
 
</div> 
 

 
</body> 
 
</html>

來源

2017-02-22 15:30:22

如果我刪除高度：50px它推動菜單很好。當我再次從菜單中按下鏈接或者如果我點擊另一個鏈接應該用他的子菜單替換，我該如何關閉子菜單。 –

有沒有辦法做到這一點沒有引導？它看起來像一個簡單的代碼，我不能得到它的底部。 –

從頂部菜單，並推下頁面

回答

相關問題