Question

嘿所以我有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框并且它被解雇了，但它似乎没有改变。有什么想法吗？

jQuery没有将显示更改为阻止

0 个答案: