jQuery 不会将显示更改为 block

标签 jquery html css

嘿，所以我有一个 函数，可以将 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 不会将显示更改为 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47492579/

上一篇：html - 未激活的移动边距错误 - Bootstrap

下一篇：javascript - 在 chrome 扩展程序中单击按钮后，即使将 CSS 显示标记更新为阻止，HTML div 也不会保持可见

相关文章：

html - Bootstrap 容器垂直居中

javascript - jQuery 从左到右动画图像？

javascript - 使用 jquery/css 垂直对齐无衬线字体

html - 控制一段高度

css - 随着内容自动增长改变 div 高度

jquery - 删除了宽度样式，仍然没有改变。查询？

javascript - jquery $.ajax 不返回值

jquery - 悬停在图像上时显示共享图标

php - 使用 PHP 将信息以 HTML 形式传递到 MySQL 数据库

html - Chrome - CSS - 背景大小重叠

©2024 IT工具网  联系我们