Question

我写了一些HTML和CSS代码来创建一个简单的网站;现在我正在尝试实现Javascript并希望进行div class='drop_cont显示。怎么做的？注意：显示默认'无'

代码显示如下：

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代码中的语法错误，或者整个代码是否有问题。

感谢您提前提供任何帮助。

Answer 1

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

注意：如果您只是想要显示按钮，这将使其隐藏/显示，使用.show()

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

<强>演示

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

你可以这样做：

$('.button').click(function() {
  $('drop_cont').show();
});

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

2 个答案: