javascript - JavaScript函数发生时宽度会自动改变吗？

问题描述

我目前正在经历一些相当奇怪的事情。我正在为客户端构建一个网站，其中包括一个水平导航栏，可以动态更改页面内容，而无需通过 javascript 重新加载。四个选项卡中的三个功能正常，但是当我选择最后一个选项卡时，侧栏的宽度会显着增加，将我的服务表单从背景中推出并离开页面 - 即使 javascript 根本不应该影响该元素. 我整天都在玩它，无法弄清楚是什么原因造成的。

我的 JavaScript 是：

var jsOverview = document.getElementById('overview');
var jsQuote = document.getElementById('quote');

function changeTextQuote() {
  if (jsOverview.style.display === 'none') {
    jsOverview.style.display = 'block';
    jsQuote.style.display = 'none';
  } else {
    jsOverview.style.display = 'none';
    jsQuote.style.display = 'block';
  }
}

<!-- begin snippet: js hide: false console: true babel: false -->

/*Service Pages CSS*/

.services {
  display: grid;
  width: 100%;
  margin: 0 600px;
  margin-bottom: 10px;
}

.side-bar {
  grid-column: 1;
  grid-row: 1;
  background: black;
  border-bottom: 5px solid white;
  border-left: 5px solid white;
  border-top: 5px solid white;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  width: 100%;
  height: 258px;
  margin: 30px 0;
  margin-right: 25px;
}

ul.side-bar-list {
  text-align: left;
  padding: 0;
  width: 100%;
}

.side-bar-list li {
  margin-bottom: 10px;
  margin-top: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
  width: 100%;
}

.side-bar-list li:hover {
  color: white;
  text-decoration: none;
  background-color: darkred;
}

.side-bar-list li:focus {
  color: white;
  text-decoration: none;
  background-color: darkred;
}

.side-bar ul {
  list-style-type: none;
}

.side-bar-item {
  color: white;
  text-align: left;
  text-decoration: none;
}

.side-bar-item:hover {
  color: white;
  text-decoration: none;
}

.side-bar-item:focus {
  color: white;
  text-decoration: none;
}

.services-content {
  grid-column: 2;
  grid-row: 1;
  background: rgba(90, 90, 90, 0.6);
  border: 5px solid black;
  border-radius: 5px;
  padding-left: 10px;
  width: 30%;
  margin-bottom: 5px;
}

.serviceForm {
  background: rgba(90, 90, 90, 0.6);
  border: 5px solid black;
  border-radius: 5px;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-column-gap: 20px;
  width: 30%;
  margin: 20px auto;
  padding: 10px;
  padding-left: 20px;
}

.col-left {
    grid-column: 1;
    grid-row: 1;
}

.col-right {
    grid-column: 3;
    grid-row: 1;
}
.commentText {
    grid-column-start: 1;
    grid-column-end: 4;
}

label {
    color: black;
}

span {
    color: white;
}

textarea[name=comments] {
    resize: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 520px;
    height: 150px;
}

HTML：

<body>
  <div class="services">
    <div class="side-bar">
      <ul class="side-bar-list">
        <li><a class="side-bar-item" href="#" onclick="changeTextOverview(); return false;">Overview</a></li>
        <li><a class="side-bar-item" href="#" onclick="changeTextInterior(); return false;">Interior Lighting</a></li>
        <li><a class="side-bar-item" href="#" onclick="changeTextExterior(); return false;">Exterior Lighitng</a></li>
        <li><a class="side-bar-item" href="#" onclick="changeTextQuote(); return false;">Request a Quote</a></li>
      </ul>
    </div>
    <div class="services-content">
      <div id="overview">
        <h1>Lighting Service:</h1><br />
        <p>Text removed for sake of business entity.</p>
      </div>
      <div id="quote" style="display: none;" <h1>Request a Quote</h1>
        <form class="serviceForm" action="mailto:companyemail" method="post" enctype="text/plain">
          <div class="col-left">
            <label>
                        <span>* Name:</span><br />
                        <input type="text" name="LightingRequestName" required />
                    </label><br />
            <label>
                        <span>* Email:</span><br />
                        <input type="text" name="LightingRequestEmail" required />
                    </label><br />
            <label>
                        <span>Company:</span><br />
                        <input type="text" name="LightingRequestCompany" />
                    </label><br />
            <label>
                        <span>Address:</span><br />
                        <input type="text" name="LightingRequestAddress" />
                    </label><br />
          </div>
          <div class="col-right">
            <label>
                        <span>City:</span><br />
                        <input type="text" name="LightingRequestCity" />
                    </label><br />
            <label>
                        <span>State:</span><br />
                        <input type="text" name="LightingRequestState" />
                    </label><br />
            <label>
                        <span>Zip Code:</span><br />
                        <input type="text" name="LightingRequestZip" />
                    </label><br />
            <label>
                        <span>Phone Number:</span><br />
                        <input type="text" name="LightingRequestNumber" />
                    </label><br />
          </div>
          <label class="commentText">
                    <span>Comments:</span><br />
                    <textarea name="comments"></textarea><br />
                </label>
          <div class="formSubmitButton">
            <input type="submit" value="Submit" /><br />
            <br />
          </div>
        </form>
      </div>
    </div>
  </div>
  <script src="~/Content/LightingPageText.js"></script>
  <script src="~/Content/ServicesQuote.js"></script>
</body>

我确定这可能是我忽略的一些非常愚蠢的事情，但感谢您提供任何帮助！

编辑：我在 chrome 上的检查窗口中环顾四周，每当我单击按钮显示表单时，侧栏所在的实际网格列就会展开，将其余内容推离屏幕。不知道为什么会这样。我仍在玩它，但希望这一启示将有助于得出一些答案。

标签： javascripthtmlcss

javascript - JavaScript函数发生时宽度会自动改变吗？

问题描述

解决方案

推荐阅读