Question

我和我的团队在页面上堆叠Dropdown组件时遇到问题。基本上，我们希望Dropdown在单击按钮时向下滑动到top-nav下方，但是当它向下滑动时，它应该位于其他所有位置：sub-nav和下面的内容。

目前，Dropdown定位为绝对值，动画使用transform: translateY()执行。我们已尝试将元素外部的元素定位为具有较高z-index的相对（带有粗体的外部<ul>，<nav>和<div id="top-nav">元素），以确保下拉列表保持在下方它，但到目前为止还没有奏效。

我们也无法修改下面的div＃内容的任何CSS或结构，但我们可以灵活地将Dropdown结构放在#header中。

编辑：我尽力在这里用JSFiddle重新创建场景： https://jsfiddle.net/4zaas4sq/

以下是我们的降价大概：

<body>
  <div id="header">
    <div>
      **<div id="top-nav">**
        <div>
          **<nav>**
            <ul></ul>
            **<ul>**
              <li>
                <DROPDOWN>
                  <button onClick={toggleDropdown}>Log In</button>
                  <div className={(this.state.show && 'show})>
                    <ul></ul>
                  </div>
                  ...
                </DROPDOWN>
              </li>
              <li></li>
            </ul>
          </nav>
        </div>
      </div>
      <div id="sub-nav">
        ...
      </div>
    </div>
  </div>
  <div id="content">

  </div>
</body>

这是一个描述下拉列表最终状态的线框。

wireframe of final state of dropdown

任何帮助或建议都将不胜感激！

Answer 1

我使用了max-height属性。我没有在你的代码中改变很多东西。在JS代码中你会看到主要的变化。让我知道这个解决方案是否是你想要的。谢谢：）

在html代码中，在id =“dropdown”的分隔符中添加class =“hideItem”，如下所示：

<div id="dropdown" class="hideItem">

JS代码

$(document).ready(function() {
$('#dropdown-button').click(function() {
    if( $("#dropdown").hasClass( 'hideItem' )){
        $( "#dropdown" ).css( 'max-height' , '100%' );
      $("#dropdown").removeClass( 'hideItem' );
      $("#dropdown").addClass( 'showItem' );
    }else{
        $( "#dropdown" ).css( 'max-height' , '0' );
      $("#dropdown").addClass( 'hideItem' );
      $("#dropdown").removeClass( 'showItem' );
    }
});
});

css代码

html, body {
 height: 100%;
}

#top-nav {
  background-color: mediumpurple;
  width: 100%;
 }

.nav {
   display: flex;
   justify-content: space-between;
 }

 .inner-left-nav {
   list-style: none;
   display: flex;
 }

 .inner-left-nav li {
    padding: 5px;
    border: 1px solid black;
  }
  .inner-right-nav {
      display: flex;
      list-style: none;
      margin: 0;
  }

  .inner-right-nav li {
     align-items: center;
     padding: 0 5px;
  }

   .dropdown-container {
      display: flex;
      align-items: center;
      height: 100%;
    }

    #dropdown {
       position: absolute;
       top: 70px;
       right: 100px;
       max-height: 0;
       overflow-y: hidden;
       transition: max-height 1s ease-in-out;
       background-color: mediumseagreen;
    }

   #dropdown.show {
     visibility: visible;
     transform: translateY(0%);
     transition: visibility 0s, transform 0.3s;
    }

    #dropdown-button {
      border: 1px solid black;
      background: transparent;
      padding: 0 20px;
      cursor: pointer;
    }

   .dropdown-list {
      padding: 0;
      list-style: none;
   }
   #sub-nav {
      display: flex;
      justify-content: space-between;
      background-color: grey;
   }

   #content {
      background-color: azure;
      width: 100%;
      height: 100%;
   }

下拉菜单 - z-index堆叠问题

1 个答案: