更改为

更改为

关注
发信
关注(28)粉丝(399)

jquery - jQuery不会将显示更改为阻止

嘿，所以我有一个function将display: none;更改为display: block;。很简单，我之前做过这种事情。不幸的是，它并没有改变CSS。我绝对不知道出什么问题了，因为我之前已经做过，而且我的代码看不到任何错误。

码：



$(function() {
    var boxOn = false;
    $("#programButtonExtra").click(function() {
        if (boxOn === false) {
            $("#extraBox").css("display", "block");
            boxOn = true;
        }
    });
    $(document.body).click(function() {
        if (boxOn === true) {
           $("#extraBox").css("display", "none");
           boxOn = false;
        }
    });
});

#programButton {
    width: 1000px;
    height: 100px;
    background: #EAEAEA;
    border: 1px solid black;
    text-align: left;
}
#programButtonText, #programButtonExtra {
    font-family: 'Open Sans', sans-serif;
    font-size: 34px;
    margin-left: 8px;
}
#extraBox {
    width: 180px;
    background: white;
    border: 2px solid #999999;
    margin-top: -80px;
    margin-left: 1000px;
    position: absolute;
    display: none;
}
#extraBox1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 25px;
    color: #47BC47;
    background: white;
    margin: 5px;
    margin-bottom: 10px;
}
#extraBox1:hover {
    cursor: pointer;
    background: #47BC47;
    color: white;
}
#extraBox2:hover {
    cursor: pointer;
    background: #D41B1B;
    color: white;
}
#extraBox2 {
    font-family: 'Open Sans', sans-serif;
    font-size: 25px;
    color: #D41B1B;
    background: white;
    margin: 5px;
    margin-top: 0px;
}
#programButtonText {
    line-height: 65px;
}
.hoverText {
    cursor: pointer;
}
#lastVisited {
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    margin-top: -35px;
    margin-left: -793px;
}
#testButton {
    cursor: default;
}
#programButtonExtra {
    margin-top: -41px;
    margin-left: 980px;
}
span.tooltips {
  position: relative;
  display: inline;
}
span.tooltips span {
  font-family: 'Open Sans', sans-serif;
  font-size: 22px;
  position: absolute;
  width: 800px;
  color: #FFFFFF;
  background: #000000;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: none;
  visibility: hidden;
  border-radius: 9px;
}
span.tooltips span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0; height: 0;
  border-top: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
span:hover.tooltips span {
  visibility: visible;
  display: block;
  opacity: 1;
  bottom: 30px;
  right: -378px;
  top: -35px;
  margin-left: -76px;
  z-index: 999;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Tests | CyanCoding</title>
    <script src="home.js"></script>
    <link rel="icon" href="Logo.ico">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="test.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Open+Sans|PT+Sans|Questrial|Raleway|Roboto|Work+Sans" rel="stylesheet">
    <link href="test.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <center>
        <div id = "testButton">
            <div id = "programButton"><div id = "programButtonText"><span class = "hoverText">Random Information Generator&nbsp;<span class = "tooltips" id = "information">ⓘ<span>The Random Information Generator quickly creates realistic information.</span></span></span></div><div id = "programButtonExtra"><span class = "hoverText">⋮</span></div></div>
            <div id = "lastVisited">Last visited: Never</div>
            <div id = "extraBox">
                <div id = "extraBox1">Save for later</div>
                <div id = "extraBox2">Report a bug</div>
            </div>
        </div>
    </center>
  </body>
</html>





如您所见（最佳结果在整页结果中），当您单击⋮（垂直省略号）时，它不会将display更改为block。我知道if function正在工作，因为我在其中放了一个alert框并触发了它，但是它似乎没有变化。有任何想法吗？

最佳答案

如果您想通过单击菜单按钮显示和隐藏，请参见下文，您可以使用toggle()简化操作



$(document).ready(function() {

  $("#programButtonExtra").click(function() {
    $("#extraBox").toggle();
  });
});

toggle()#programButton {
  width: 1000px;
  height: 100px;
  background: #EAEAEA;
  border: 1px solid black;
  text-align: left;
}

#programButtonText,
#programButtonExtra {
  font-family: 'Open Sans', sans-serif;
  font-size: 34px;
  margin-left: 8px;
}

#extraBox {
  width: 180px;
  background: white;
  border: 2px solid #999999;
  margin-top: -80px;
  margin-left: 1000px;
  position: absolute;
  display: none;
}

#extraBox1 {
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
  color: #47BC47;
  background: white;
  margin: 5px;
  margin-bottom: 10px;
}

#extraBox1:hover {
  cursor: pointer;
  background: #47BC47;
  color: white;
}

#extraBox2:hover {
  cursor: pointer;
  background: #D41B1B;
  color: white;
}

#extraBox2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
  color: #D41B1B;
  background: white;
  margin: 5px;
  margin-top: 0px;
}

#programButtonText {
  line-height: 65px;
}

.hoverText {
  cursor: pointer;
}

#lastVisited {
  font-family: 'Open Sans', sans-serif;
  font-size: 22px;
  margin-top: -35px;
  margin-left: -793px;
}

#testButton {
  cursor: default;
}

#programButtonExtra {
  margin-top: -41px;
  margin-left: 980px;
}

span.tooltips {
  position: relative;
  display: inline;
}

span.tooltips span {
  font-family: 'Open Sans', sans-serif;
  font-size: 22px;
  position: absolute;
  width: 800px;
  color: #FFFFFF;
  background: #000000;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: none;
  visibility: hidden;
  border-radius: 9px;
}

span.tooltips span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

span:hover.tooltips span {
  visibility: visible;
  display: block;
  opacity: 1;
  bottom: 30px;
  right: -378px;
  top: -35px;
  margin-left: -76px;
  z-index: 999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="test.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Open+Sans|PT+Sans|Questrial|Raleway|Roboto|Work+Sans" rel="stylesheet">

<center>
  <div id="testButton">
    <div id="programButton">
      <div id="programButtonText"><span class="hoverText">Random Information Generator&nbsp;<span class = "tooltips" id = "information">ⓘ<span>The Random Information Generator quickly creates realistic information.</span></span>
        </span>
      </div>
      <div id="programButtonExtra"><span class="hoverText">⋮</span></div>
    </div>
    <div id="lastVisited">Last visited: Never</div>
    <div id="extraBox">
      <div id="extraBox1">Save for later</div>
      <div id="extraBox2">Report a bug</div>
    </div>
  </div>
</center>

关于jquery - jQuery不会将显示更改为阻止，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47492579/

10-11 23:32
Powered by LMLPHP ©2024 更改为 0.033393