Question

我需要一些帮助。

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

菜单应位于页面上方，高度为50px。如果我使用高度，内容将不会被推下。

当我点击第一个链接时，我应该获得该链接的子菜单。如果我按下第二个链接，第一个子菜单应该用第二组子菜单链接替换。

现在它已经搞砸了，我无法让它发挥作用。我不太了解javascript，你可以在这里看到：

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

提前感谢您的所有时间。

https://jsfiddle.net/tjkr6L08/

Answer 1

查看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。你想要的是引用以前打开的子菜单，这样你就可以关闭它。为了使事情正确对齐，菜单可以是绝对的;

所以上面是最快的解决方案 - 可能不是最好的，但会让你知道如何继续。

Answer 2

您可以使用bootstrap collapse类而不是在java脚本中切换一次，请参阅bootstrap的文档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>
	</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>

菜单从顶部侧卧并向下推动页面

2 个答案: