javascript - 如何切换隐藏的分隔线以在 HTML 中显示？

我已经编写了一些 HTML 和 CSS 代码来创建一个简单的网站；现在我正在尝试实现 Javascript 并希望显示 div class='drop_cont。这是怎么做到的？注意:显示默认'none'

代码如下:

var main = function() {
  $('.button').click(function() {
    document.getElementbyID('drop_cont').classList.toggle('show');
  });
};

$(document).ready(main);

body{
  background-image: url(whatsapp-background.jpg)
}

.nav {
  background-color:rgba(105, 188, 88, 0.5);
  overflow:hidden;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  /* display: inline-block;  div wraps content */

}

.nav a {
  color: #000000;
  float: left;
  display:block;
  tex-align: center;
  text-decoration: none;
  font-size: 1rem;
  padding: 1rem;
  border-right: 2px solid black;
}

.nav a:hover {
  background-color:#ccc9c9;
}

h1{
  color:#faffd6;
  text-align: center;
  font-size: 3rem;
  text-shadow: 0 0 5px #69bc58;
}

.h1_div{
  text-align: center;
}

.drop_cont{
  display:none;
}

<!DOCTYPE html>
<html>
<head>
  <title>Test1</title>
<link rel='stylesheet' type='text/css' href='CSS1.css'/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div class='h1_div'>
<h1>Test1</h1>
</duv>
<div class='nav'>
  <a href='#home'>Selector#1</a>
  <a>Selector#2</a>
  <a>Selector#3</a>
</div>
<div class='drop'>
<button class='button'>Press me!</button>
  <div id='drop_cont' class='drop_cont'>
    <a href='#home'>Home</a>
  </div>
</div>

<script src="JS1.js"></script>
</body>
</html>

我不知道这只是我的 JS 代码中的语法错误还是整个代码有问题。

提前感谢您的帮助。

最佳答案

您可以使用 $('#drop_cont').toggle('.show');

注意:如果您只是想让它显示，这将使它在您按下按钮时隐藏/显示，请使用 .show()

var main = function() {
  $('.button').click(function() {
    $('#drop_cont').toggle('.show');
  });
};

演示

var main = function() {
  $('.button').click(function() {
    $('#drop_cont').toggle('.show');
  });
};

$(document).ready(main);

body {
  background-image: url(whatsapp-background.jpg)
}

.nav {
  background-color: rgba(105, 188, 88, 0.5);
  overflow: hidden;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  /* display: inline-block;  div wraps content */
}

.nav a {
  color: #000000;
  float: left;
  display: block;
  tex-align: center;
  text-decoration: none;
  font-size: 1rem;
  padding: 1rem;
  border-right: 2px solid black;
}

.nav a:hover {
  background-color: #ccc9c9;
}

h1 {
  color: #faffd6;
  text-align: center;
  font-size: 3rem;
  text-shadow: 0 0 5px #69bc58;
}

.h1_div {
  text-align: center;
}

.drop_cont {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Test1</title>
  <link rel='stylesheet' type='text/css' href='CSS1.css' />
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

<body>
  <div class='h1_div'>
    <h1>Test1</h1>
    </duv>
    <div class='nav'>
      <a href='#home'>Selector#1</a>
      <a>Selector#2</a>
      <a>Selector#3</a>
    </div>
    <div class='drop'>
      <button class='button'>Press me!</button>
      <div id='drop_cont' class='drop_cont'>
        <a href='#home'>Home</a>
      </div>
    </div>

    <script src="JS1.js"></script>
</body>

</html>

关于javascript - 如何切换隐藏的分隔线以在 HTML 中显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46789995/

javascript - 如何切换隐藏的分隔线以在 HTML 中显示？

上一篇：javascript - 单击更改 Bootstrap Popover 触发器

下一篇：javascript - 如何在 ajax 响应中获取特定属性？