Question

我有一个包含许多记录的网格。在每条记录中，都有一个打开小菜单的选项。菜单的问题是当它在最后一行打开时被浏览器的边缘隐藏。对于所有行的菜单应该向下打开，这是要求。对于菜单即将截止的最后一行，我想要的修复是向上打开。

$(function() {
  $("a").click(function() {
    //debugger;
    $(this).next().toggle();
  });
});

#main {
  background-color: #ccc;
  overflow: hidden
}

.row {
  height: 30px;
  border: 1px solid #000;
  line-height: 30px;
  background-color: #FFF;
  position: relative;
  overflow: visible
}

.menu {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0;
  left: 100px;
  background-color: green;
  display: none;
  z-index: 1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="main">
  <div class="row">
    <a href="javascript:void(0)">Open Menu</a>
    <div class="menu"></div>
  </div>
  <div class="row">
    <a href="javascript:void(0)">Open Menu</a>
    <div class="menu"></div>
  </div>
  <div class="row">
    <a href="javascript:void(0)">Open Menu</a>
    <div class="menu"></div>
  </div>
  <div class="row">
    <a href="javascript:void(0)">Open Menu</a>
    <div class="menu"></div>
  </div>
</div>

我在这里创建了一个jsfiddle - https://jsfiddle.net/ashwyn/5mwcvhkr/3/

我正在寻找一个CSS解决方案。如果不是CSS那么最小的JavaScript。

Answer 1

您可以定位最后row并将其中的菜单设置为从底部打开...

$(function() {
  $("a").click(function() {
    //debugger;
    $(this).next().toggle();
  });
});

#main {
  background-color: #ccc;
  overflow: hidden
}

.row {
  height: 30px;
  border: 1px solid #000;
  line-height: 30px;
  background-color: #FFF;
  position: relative;
  overflow: visible
}

.menu {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0;
  left: 100px;
  background-color: green;
  display: none;
  z-index: 1
}

.row:last-child .menu {
  top: initial;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div class="row">
    <a href="javascript:void(0)">Open Menu</a>
    <div class="menu"></div>
  </div>
  <div class="row">
    <a href="javascript:void(0)">Open Menu</a>
    <div class="menu"></div>
  </div>
  <div class="row">
    <a href="javascript:void(0)">Open Menu</a>
    <div class="menu"></div>
  </div>
  <div class="row">
    <a href="javascript:void(0)">Open Menu</a>
    <div class="menu"></div>
  </div>
</div>

Answer 2

$(function() {
  $("a").click(function() {
    //debugger;
    var $menu = $(this).next();
    $menu.toggle();
    ensureMenuItemNotHidden($menu);
  });
});

function ensureMenuItemNotHidden($menuItem) {
  // Calculating main bottom position relative to document's top
  var mainMenuBottom = $("#main").offset().top + $("#main").height();
  // Calculating main bottom position relative to document's top
  var menuItemBottom = $menuItem.offset().top + $menuItem.height();
  var menuItemOverflows = mainMenuBottom - menuItemBottom < 0;
  
  // add menu--top class if menu item overflows
  $menuItem.toggleClass("menu--top", menuItemOverflows);
}

#main {
  background-color: #ccc;
  overflow: hidden
}

.row {
  height: 30px;
  border: 1px solid #000;
  line-height: 30px;
  background-color: #FFF;
  position: relative;
  overflow: visible
}

.menu {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0;
  left: 100px;
  background-color: green;
  display: none;
  z-index: 1
}

.menu--top {
  top: initial;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="main">
  <div class="row">
    <a href="javascript:void(0)">Open Menu</a>
    <div class="menu"></div>
  </div>
  <div class="row">
    <a href="javascript:void(0)">Open Menu</a>
    <div class="menu"></div>
  </div>
  <div class="row">
    <a href="javascript:void(0)">Open Menu</a>
    <div class="menu"></div>
  </div>
  <div class="row">
    <a href="javascript:void(0)">Open Menu</a>
    <div class="menu"></div>
  </div>
</div>

当菜单到达父母的底部时，避免菜单隐藏

2 个答案: