从顶部菜单，并推下页面

我试图制作一个菜单，单击时会将页面向下推并显示特定的子菜单。

菜单应该在页面上方，高度为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它推动菜单很好。当我再次从菜单中按下链接或者如果我点击另一个链接应该用他的子菜单替换，我该如何关闭子菜单。 –

有没有办法做到这一点没有引导？它看起来像一个简单的代码，我不能得到它的底部。 –

从顶部菜单，并推下页面

回答

相关问题