Onclick功能在第一次单击时不起作用

时间：2018-07-17 18:22:22

标签： javascript jquery css onclick

我在网站上创建了一个侧面弹出窗口，但是我遇到了问题。它工作正常，但仅在第二次单击时有效。我希望它在第一次点击时就可以正常工作。当我单击两次时，它可以工作。我已经尝试了其他一些博客技巧，但是没有用。

怎么了？

我使用简单的JS创建了它，您可以在下面看到我的代码：

function openNav() {
  navMenuStatus = document.getElementById('popup').style.right;
  if (navMenuStatus == '-300px') {
    document.getElementById('popup').style.right = '0px';
  } else {
    document.getElementById('popup').style.right = '-300px';
  }
}
.pmenu {
  cursor: pointer;
  width: 70px;
  font-weight: 600;
  color: #fff;
  float: left;
}

.pmenu img {
  padding: 5px 11px;
  background-color: #fff000;
}

.pmenu p {
  text-align: center;
  padding: 10px 4px;
  background-color: #356381;
  margin: 0 0 0px;
  font-size: 14px;
}

.pbody {
  color: #fff;
  float: left;
  width: 300px;
  background-color: #356381;
  border-left: 5px solid #fff000;
}

.pbody p {
  text-align: center;
  font-size: 15px;
  margin: 10px;
}

.pbody h4 {
  text-align: center;
  font-weight: 600;
  margin: 0px;
  color: #000;
  background-color: #fff000;
  padding: 10px 0px;
}

.pbody h5 {
  font-size: 15px;
  text-align: center;
  background: #193e56;
  padding: 15px;
}

.address {
  text-align: center;
}

.address h6 {
  color: #356381;
  background-color: #fff000;
  font-size: 14px;
  padding: 10px 0px 10px 10px;
  margin-top: 0px;
  min-width: 245px;
  text-align: left;
}

.aicon {
  float: left;
  width: 50px;
  background-color: #193e56;
  color: #fff;
  padding: 14px 12px;
}

.aadd {
  float: left;
  color: #fff;
}

.popup {
  position: absolute;
  right: -300px;
  top: 20px;
  z-index: 3;
  transition: 0.3s all;
}
<div class="popup" id="popup">
  <div class="pmenu" onclick="openNav()">
    <p>GET THE<br/>BOOK</p>
    <img src="del.png">
  </div>
  <div class="pbody">
    <h4>HOW TO GET THE PHONEBOOK</h4>
    <p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
    <h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
    <div class="address">
      <div class="aicon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="aadd">
        <h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
      </div>
      <div class="aicon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="aadd">
        <h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
      </div>
    </div>
  </div>
</div>

View on Codepen

2 个答案:

答案 0 :(得分：3)

您的代码检查style的{​​{1}}属性。由于加载的right:-300px上没有style属性，因此第一次单击仅将样式属性设置为#popup。然后，第二次单击将其设置为“ 0”，等等。

请注意，style引用元素的内联样式，而不引用right:-300px应用的CSS。

通过将默认的class属性设置为style，我获得了一些成功。

-300px
function openNav() {
  navMenuStatus = document.getElementById('popup').style.right;
  if (navMenuStatus == '-300px') {
    document.getElementById('popup').style.right = '0px';
  } else {
    document.getElementById('popup').style.right = '-300px';
  }
}
.pmenu {
  cursor: pointer;
  width: 70px;
  font-weight: 600;
  color: #fff;
  float: left;
}

.pmenu img {
  padding: 5px 11px;
  background-color: #fff000;
}

.pmenu p {
  text-align: center;
  padding: 10px 4px;
  background-color: #356381;
  margin: 0 0 0px;
  font-size: 14px;
}

.pbody {
  color: #fff;
  float: left;
  width: 300px;
  background-color: #356381;
  border-left: 5px solid #fff000;
}

.pbody p {
  text-align: center;
  font-size: 15px;
  margin: 10px;
}

.pbody h4 {
  text-align: center;
  font-weight: 600;
  margin: 0px;
  color: #000;
  background-color: #fff000;
  padding: 10px 0px;
}

.pbody h5 {
  font-size: 15px;
  text-align: center;
  background: #193e56;
  padding: 15px;
}

.address {
  text-align: center;
}

.address h6 {
  color: #356381;
  background-color: #fff000;
  font-size: 14px;
  padding: 10px 0px 10px 10px;
  margin-top: 0px;
  min-width: 245px;
  text-align: left;
}

.aicon {
  float: left;
  width: 50px;
  background-color: #193e56;
  color: #fff;
  padding: 14px 12px;
}

.aadd {
  float: left;
  color: #fff;
}

.popup {
  position: absolute;
  right: -300px;
  top: 20px;
  z-index: 3;
  transition: 0.3s all;
}

或者，您可以使用getComputedStyle在样式表中找到<div class="popup" id="popup" style="right:-300px"> <div class="pmenu" onclick="openNav()"> <p>GET THE<br/>BOOK</p> <img src="del.png"> </div> <div class="pbody"> <h4>HOW TO GET THE PHONEBOOK</h4> <p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p> <h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5> <div class="address"> <div class="aicon"> <i class="fa fa-map-marker"></i> </div> <div class="aadd"> <h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6> </div> <div class="aicon"> <i class="fa fa-map-marker"></i> </div> <div class="aadd"> <h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6> </div> </div> </div> </div>属性集。

right
function openNav() {
  navMenuStatus = window.getComputedStyle(document.getElementById('popup'), null).getPropertyValue('right');
  if (navMenuStatus == '-300px') {
    document.getElementById('popup').style.right = '0px';
  } else {
    document.getElementById('popup').style.right = '-300px';
  }
}
.pmenu {
  cursor: pointer;
  width: 70px;
  font-weight: 600;
  color: #fff;
  float: left;
}

.pmenu img {
  padding: 5px 11px;
  background-color: #fff000;
}

.pmenu p {
  text-align: center;
  padding: 10px 4px;
  background-color: #356381;
  margin: 0 0 0px;
  font-size: 14px;
}

.pbody {
  color: #fff;
  float: left;
  width: 300px;
  background-color: #356381;
  border-left: 5px solid #fff000;
}

.pbody p {
  text-align: center;
  font-size: 15px;
  margin: 10px;
}

.pbody h4 {
  text-align: center;
  font-weight: 600;
  margin: 0px;
  color: #000;
  background-color: #fff000;
  padding: 10px 0px;
}

.pbody h5 {
  font-size: 15px;
  text-align: center;
  background: #193e56;
  padding: 15px;
}

.address {
  text-align: center;
}

.address h6 {
  color: #356381;
  background-color: #fff000;
  font-size: 14px;
  padding: 10px 0px 10px 10px;
  margin-top: 0px;
  min-width: 245px;
  text-align: left;
}

.aicon {
  float: left;
  width: 50px;
  background-color: #193e56;
  color: #fff;
  padding: 14px 12px;
}

.aadd {
  float: left;
  color: #fff;
}

.popup {
  position: absolute;
  right: -300px;
  top: 20px;
  z-index: 3;
  transition: 0.3s all;
}

也许更好，根据Arash Kazemi的建议，使用toggle()在classList中切换元素的CSS类。

<div class="popup" id="popup">
  <div class="pmenu" onclick="openNav()">
    <p>GET THE<br/>BOOK</p>
    <img src="del.png">
  </div>
  <div class="pbody">
    <h4>HOW TO GET THE PHONEBOOK</h4>
    <p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
    <h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
    <div class="address">
      <div class="aicon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="aadd">
        <h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
      </div>
      <div class="aicon">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="aadd">
        <h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
      </div>
    </div>
  </div>
</div>
var trigger = document.getElementById('popup_trigger');
var popup = document.getElementById('popup');

function openNav() {
  popup.classList.toggle('hide');
}

trigger.addEventListener('click', openNav);
.pmenu {
  cursor: pointer;
  width: 70px;
  font-weight: 600;
  color: #fff;
  float: left;
}

.pmenu img {
  padding: 5px 11px;
  background-color: #fff000;
}

.pmenu p {
  text-align: center;
  padding: 10px 4px;
  background-color: #356381;
  margin: 0 0 0px;
  font-size: 14px;
}

.pbody {
  color: #fff;
  float: left;
  width: 300px;
  background-color: #356381;
  border-left: 5px solid #fff000;
}

.pbody p {
  text-align: center;
  font-size: 15px;
  margin: 10px;
}

.pbody h4 {
  text-align: center;
  font-weight: 600;
  margin: 0px;
  color: #000;
  background-color: #fff000;
  padding: 10px 0px;
}

.pbody h5 {
  font-size: 15px;
  text-align: center;
  background: #193e56;
  padding: 15px;
}

.address {
  text-align: center;
}

.address h6 {
  color: #356381;
  background-color: #fff000;
  font-size: 14px;
  padding: 10px 0px 10px 10px;
  margin-top: 0px;
  min-width: 245px;
  text-align: left;
}

.aicon {
  float: left;
  width: 50px;
  background-color: #193e56;
  color: #fff;
  padding: 14px 12px;
}

.aadd {
  float: left;
  color: #fff;
}

.popup {
  position: absolute;
  right: 0;
  top: 20px;
  z-index: 3;
  transition: 0.3s all;
}

.popup.hide {
  right: -300px;
}

答案 1 :(得分：2)

因为document.getElementById('popup').style.right是空的，所以您第一次阅读它。没有为ID弹出的元素设置规则，而是为具有类弹出的元素设置规则。

一个肮脏的快速解决方案是检查其是否等于“ 0px”。但是，更好的方法是定义一个权限为0px的类名.opened-popup。然后点击切换该类。像这样：

function openNav() {
  document.getElementById('popup').classList.toggle("opened-popup");
}

看一下这个好的解决方案： https://codepen.io/anon/pen/EpyWQm

相关问题
最新问题