Question

任何人都可以帮我查询。我有一个带按钮的页面

<button id="btnStudents" name="btnStudents" style="width:90px;cursor:default;" title="Click to add/update/delete Student records" onClick="javascript:fn_ShowHide('lyrStudents', this.id)"> 
                <table width="100%" cellpadding=0 cellspacing=0>
                  <tr> 
                    <td height="25"> 
                      <div align="center"><img src="../images/icons/student.gif" hspace="0" align="absmiddle" width="32" height="32" vspace="10"><font class="BodyHDRFontBold"></font></div>
                    </td>
                  </tr>
                  <tr> 
                    <td height="25"> 
                      <div align="center"> <font class="BodyHDRFontBold"><b>Manage 
                        Students</b></font></div>
                    </td>
                  </tr>
                </table>
                </button>

并且只要单击此按钮，就会在按钮下方打开一个小图层。我尝试使用按钮的左侧和顶部来执行此操作，但它并不适用于所有浏览器。层代码如下。默认情况下，图层将被隐藏，除非用户点击按钮。

                    <div id="lyrStudents" style="position:absolute; left:749px; top:412px; width:183px; height:148px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000;"> 
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tblBorder">
                    <tr> 
                      <td colspan="2" class="bgColorBar" height="25"> 
                        <div align="center"><font class="BodyFontNormal"><b>:: 
                          Students Menu ::</b></font></div>
                      </td>
                    </tr>
                    <tr> 
                      <td colspan="2"><img src="../images/supporting/b3b3ff_line.png" width="100%" height="1"></td>
                    </tr>
                    <tr> 
                      <td width="12%">&nbsp;</td>
                      <td width="88%">&nbsp;</td>
                    </tr>
                    <tr> 
                      <td width="12%">&nbsp;</td>
                      <td width="88%">&nbsp;</td>
                    </tr>
                    <tr> 
                      <td width="12%">&nbsp;</td>
                      <td width="88%">&nbsp;</td>
                    </tr>
                  </table>
                </div>

感谢您的帮助。

Answer 1

我刚刚做了类似的事情。希望你能用到这个。它使用prototype.js和scriptaculous：

      function hideDivs() {
    Element.hide('subnavHM');
    $('subnavHM').shown = false;

    Element.hide('subnavSS');
    $('subnavSS').shown = false;

    Element.hide('subnavPO');
    $('subnavPO').shown = false;

    Element.hide('subnavIN');
    $('subnavIN').shown = false;

    Element.hide('subnavPE');
    $('subnavPE').shown = false;

    Element.hide('subnavAN');
    $('subnavAN').shown = false;

    Element.hide('subnavDV');
    $('subnavDV').shown = false;

  }

  function showHide(div) {
    hideDivs();

    if ($(div).shown) {
      $(div).style.visibility = "hidden";
      new Effect.Fade($(div));
      $(div).shown = false;

    }
    else {
      $(div).style.visibility = "visible";
      new Effect.Appear($(div));
      $(div).shown = true;
    }
  }

我从body onload运行hideDivs

Answer 2

感谢大家的直接/间接帮助。我设法从外部来源解决问题。

function fn_Reposition(strFieldName, lyrName )
{
var intLeft, intTop, intBtnHeight, obj;

obj = document.getElementById(strFieldName);
intBtnHeight = document.getElementById(strFieldName).clientHeight;

document.getElementById(lyrName).style.top = getElTop(obj) + intBtnHeight;
document.getElementById(lyrName).style.left = getElLeft(obj)
}


// Many thanks to Paul Hayman 
// Code Source: http://www.geekzilla.co.uk/ViewContent.aspx?ContentID=252 
function getElLeft(el)
{
if (ns4)
{
    return el.pageX;
} 
else
{
    xPos = el.offsetLeft;
    tempEl = el.offsetParent;
    while (tempEl != null)
    {
        xPos += tempEl.offsetLeft;
        tempEl = tempEl.offsetParent;
    }
    return xPos;
}
}
function getElTop(el)
{
if (ns4)
{
    return el.pageY;
} 
else
{
    yPos = el.offsetTop;
    tempEl = el.offsetParent;
    while (tempEl != null)
    {
        yPos += tempEl.offsetTop;
        tempEl = tempEl.offsetParent;
    }
    return yPos;
}
}

经典ASP＆amp; JavaScript的

2 个答案: