javascript - 滚动div中的绝对定位下拉菜单

Question

我有一个最大高度约为 500 像素的可滚动 div。里面有多个子 div(部分)，每个部分都有一个菜单。菜单是典型的下拉菜单，类似于:

.menu ul li{
    position:relative;
    float:none;
    display:none; }

我面临的问题是，当菜单打开时，它会将所有内容下推。如果我将其设置为绝对位置，它会弄乱稍后出现的部分(向下滚动后)。

我应该通过 javascript 计算偏移量并以编程方式定位它们，还是可以通过 CSS 解决？

一种方法是让“sections”的位置是绝对的。然后我可以利用 position: relative 使菜单位于每个部分的正确位置。但由于其他原因，我无法做到这一点。

JSFiddle http://jsfiddle.net/iamjab/m66sgs5z/

我们将不胜感激。

Answer 1

为 stackplotwrap 添加了 position:relative 和 padding-top 并通过给 position:absolute 定位 ul stackplotwrap

的顶部填充区域

$(document).on('click', '.menu li', function () {
    $(this).find('ul li').css('display', 'block');
});
$(document).on('mouseleave', '.menu li', function () {
    $(this).find('li').css('display', 'none');
});

.stackedPlotter {
  width: 100%;
  max-height: 300px;
}
.stackplotwrap {
  padding: 50px 0 0 0;
  position: relative;
}
.thiswrap {
  overflow-y: auto;
}
.menu {
  width: 100%;
  background: #eee;
  position: absolute;
  width: 100%;
  top: 0;
  padding: 0;
  margin: 10px 0;
}
.menu li {
  margin-right: 5px;
  float: left;
  list-style: none;
}
.menu li:hover {
  color: red;
}
.menu li ul li {
  display: none;
  float: none;
  position: relative;
}
.content {
  height: 200px;
  background: #ccc;
}
.clear {
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="stackedPlotter">
  <div class="thiswrap">
    <div class="stackplotwrap">
      <!-- SECTION 1 -->
      <ul class="menu">
        <li>Option 1
          <ul>
            <li>Opt 3-1</li>
            <li>Opt 3-2</li>
            <li>Opt3-3</li>
          </ul>
        </li>
        <li>Option 2
          <ul>
            <li>Opt 3-1</li>
            <li>Opt 3-2</li>
            <li>Opt3-3</li>
          </ul>
        </li>
        <li>Option 3
          <ul>
            <li>Opt 3-1</li>
            <li>Opt 3-2</li>
            <li>Opt3-3</li>
          </ul>
        </li>
      </ul>
      <div class="clear"></div>
      <div class="content">CONTENT</div>
    </div>
    <div class="stackplotwrap">
      <!-- SECTION 2 -->
      <ul class="menu">
        <li>Option 1
          <ul>
            <li>Opt 3-1</li>
            <li>Opt 3-2</li>
            <li>Opt3-3</li>
          </ul>
        </li>
        <li>Option 2
          <ul>
            <li>Opt 3-1</li>
            <li>Opt 3-2</li>
            <li>Opt3-3</li>
          </ul>
        </li>
        <li>Option 3
          <ul>
            <li>Opt 3-1</li>
            <li>Opt 3-2</li>
            <li>Opt3-3</li>
          </ul>
        </li>
      </ul>
      <div class="clear"></div>
      <div class="content">CONTENT</div>
    </div>
    <div class="stackplotwrap">
      <!-- SECTION 3 -->
      <ul class="menu">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3
          <ul>
            <li>Opt 3-1</li>
            <li>Opt 3-2</li>
            <li>Opt3-3</li>
          </ul>
        </li>
      </ul>
      <div class="clear"></div>
      <div class="content">CONTENT</div>
    </div>
    <div class="stackplotwrap">
      <!-- SECTION 4 -->
      <ul class="menu">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3
          <ul>
            <li>Opt 3-1</li>
            <li>Opt 3-2</li>
            <li>Opt3-3</li>
          </ul>
        </li>
      </ul>
      <div class="clear"></div>
      <div class="content">CONTENT</div>
    </div>
    <div class="stackplotwrap">
      <!-- SECTION 5 -->
      <ul class="menu">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3
          <ul>
            <li>Opt 3-1</li>
            <li>Opt 3-2</li>
            <li>Opt3-3</li>
          </ul>
        </li>
      </ul>
      <div class="clear"></div>
      <div class="content">CONTENT</div>
    </div>
  </div>
</div>