0

我正在调用这个 Javascript 函数：

var facing = "First";

function switchit(list){
      if (list != facing){
          document.getElementById(facing).style.display="none";
  };
 var listElementStyle=document.getElementById(list).style;
      if (listElementStyle.display=="none"){
          listElementStyle.display="block";
  } else {
          listElementStyle.display="none";
  }
 facing = list;
 }
</script>

在嵌套的 div 中，这样当单击超链接时，它将显示一个元素并隐藏另一个元素，如下所示：

    <div id="bio">



            <!--Ty Expansion -->
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="bioEmphasis">What</span> O.L.L.I.E. Lifestyle represents is very personal to me. It has been an aspiration of mine to dedicate myself to the betterment and empowerment of our youth.  <a href="javascript:switchit('First')">Click to read more..</a><br />
         <div id="First" style="display: none;">   

            </p>

           <hr/><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="bioEmphasis">Apart</span> of a society where the vast majority of youth are growing up in single parent homes (many in low income neighborhoods). I have witnessed first hand how heavily influenced the youth are by television, music and movies. More Educators, Athletes and Professionals are needed to lend encouragement and guidance on becoming productive members to our environment instead of adapting to a fatal cliché of being a product of their environment.</p>
    </div>

    <p>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="bioEmphasis">Life is</span> a crazy game!! The trick is to learn how to play! Growing up in New Jersey, the second youngest out of eight, I was fortunate enough to see how the game is NOT supposed to be played.  I watched my brothers and sister go through dealing with the law, drugs, and a “content” way of life. This was the beginning of me really wanting to live my life in excellence.  <a href="javascript:switchit('Second')">Click to read more..</a><br />
         <div id="Second" style="display: none;">   


         </p>
         <hr/><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="bioEmphasis">All through</span> middle and high school, I was an honor student. Unfortunately, I always was attracted to the “under life”. It seemed like the more popular, in crowd thing to do. I felt like this because of some of my earlier struggles. Having a distinct name and a handicapped brother would fuel my want to be a part of the normal crowd. I can fondly remember being constantly made fun of for being different. Little did I know, what I was doing all along was the right thing and would pay off.</p>
    <hr />

    </div>
</div>

这些功能可以完美地在较大的 div 容器内一次扩展一个 div 元素。问题是，当我通过单击超链接展开任一元素时...较大的 div 容器（红色渐变方块）将所有内容推到背景之外（实心灰色方块）并搞砸了整个页面的外观，因为 div， （这是几个级别），包含背景是一个固定的宽度，（因为百分比宽度不起作用）。我知道由于用户单击超链接，背景需要动态扩展的确切两个宽度，但我不知道如何从我发布的上述 Javascript 函数中执行此操作。有人对我有任何想法或帮助吗？这非常令人困惑，因为我需要调整大小的 div 是我正在使用的函数调用之外的完整 3 个级别。

div#topwrapper-->div#greySquareH-->div#LeftSide-->div#bioWrapper-->div#bio

并导致在 div#bio 中生成 div#First 或 div#Second。我需要调整 div#greySquareH 高度属性的大小。感谢您提前提供任何帮助！

4

1 回答 1

0

我不确定我是否完全遵循了您的问题-您提供了很多难以阅读的细节，并且似乎隐藏了您的主要观点。

我想你只是在问如何动态改变 div#greySquareH 的高度

在这种情况下，你想要的是

document.getElementById("greySquareH").style.height="40px";

显然，您可以将“40px”替换为您想要的任何高度

如果您正在寻找更多信息，请留下简短评论，说明您还需要什么。

更新：整个 HTML 页面只有 1 个document，因此您可以将该行代码放入您想要的任何函数中，它会做同样的事情。

switchit您已经编写的函数不仅限于在您附加的 DIV 上工作。

只需将它放在您现有的功能中，就在您的facing = list;行之前。

于 2011-02-04T01:31:30.900 回答