親の一番下まで隠れるメニューを避ける

Question

私はいくつかのレコードを持つグリッドを持っています。各レコードには小さなメニューを開くオプションがあります。メニューの問題は、ブラウザの最後の行で開いたときにブラウザの端に隠れることです。すべての行のメニューが下向きに開く必要があります。メニューが途切れている最後の行については、それが上向きに開いていなければなりません。私はCSSの解決策を探していますhttps://jsfiddle.net/ashwyn/5mwcvhkr/3/

- 私はここにjsfiddleを作成している

$(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>

。 CSSでなければ最小限のJavaScript。

Answer 1

あなたは私が行うことはできません

$(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>