0

テーブル内の各クライアントに対して複数のドロップダウン メニューがあり、そのテーブルがスクロール可能な div 内にあるシナリオがあります。デフォルトでは、上位 3 つのクライアントのみが表示されます。クライアントに対してアクション ボタンをクリックすると、アクション ボタンのすぐ下にサブメニューが表示されます。

div をスクロールしてから、4 番目、5 番目、または 6 番目のクライアントに対してアクション ボタンをクリックすると、アクション ボタンとサブメニューの間に隙間ができて困っています。

        <ul class="actionMenu" id="centralObjUL" >
       <li class="actionMenuLi" id="liAction" onclick="displaySubMenu(this)" >
          <a class="actionMenuLink" onkeydown="keydown('','Link1')" onblur="liOnblur(this.parentNode)" href="javascript:void(0);">Actions&nbsp;&nbsp;&nbsp;</a>
          <ul class="actionSubMenu" id="subMenu" style="display: none;">
             <li class="actionSubMenuLi">
                <a class="actionSubMenuLink" id="Link1"  onmousemove="fnMenuMouseMove(this)" onkeydown="keydown('Link1','Link2')" onfocus="aOnfocus(this,'subMenu')" onblur="aOnblur(this,'liAction')" href="javascript:void(0);">Client link 1</a>
             </li>
             <li class="actionSubMenuLi">
                <a class="actionSubMenuLink" id="Link2"  onmousemove="fnMenuMouseMove(this)" onkeydown="keydown('Link1','Link3')" onfocus="aOnfocus(this,'subMenu')" onblur="aOnblur(this,'liAction')" href="javascript:void(0);">Client link 2</a>
             </li>
             <li class="actionSubMenuLi">
                <a class="actionSubMenuLink" id="Link3"  onmousemove="fnMenuMouseMove(this)" onkeydown="keydown('Link2','Link4')"  onfocus="aOnfocus(this,'subMenu')" onblur="aOnblur(this,'liAction')" href="javascript:void(0);">Client link 3</a>
             </li>
             <li class="actionSubMenuLi">
                <a class="actionSubMenuLink" id="Link4"  onmousemove="fnMenuMouseMove(this)" onkeydown="keydown('Link3','PRFS')"  onfocus="aOnfocus(this,'subMenu')" onblur="aOnblur(this,'liAction')" href="javascript:void(0);">Client link 4</a>
             </li>
          </ul>
       </li>
    </ul>

この問題の例を次に示します: http://jsfiddle.net/nkumar/M3MhW/

4

1 に答える 1

0

問題は、サブメニューが絶対位置であることです。テーブル要素とともにサブメニューを移動する必要があります。

ここ：

function displaySubMenu(li) {
    var objSubMenu = li.getElementsByTagName("ul")[0];
    //This would move the submenu
    objSubMenu.style.top=li.getBoundingClientRect().top+25+"px";
    objSubMenu.style.display = (objSubMenu.style.display == "block" ? "none" : "block");
}

それが役立つことを願っています。

于 2013-08-07T22:17:26.030 に答える