用javascript点击展开和关闭-前端问答-PHP中文网

用javascript点击展开和关闭

WBOY

发布： 2023-05-29 22:40:08

原创

1632人浏览过

随着现代网页设计需求的不断增长，动态效果的需求也变得越来越多。其中一个常见的需求是点击按钮或链接来展开或关闭内容。这时候，我们可以使用javascript来实现这个功能。

JavaScript是一种动态编程语言，可以操作网页上的HTML和CSS，以及处理用户交互和动态效果。在以下演示中，我们将使用JavaScript来创建一个可以展开和关闭内容的按钮。

首先，我们需要创建一个HTML页面。在这个页面中，我们将添加一个包含内容的DIV元素，以及一个可以展开和关闭内容的按钮。代码如下：

<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript点击展开和关闭</title>
      <style>
         .content {
            display: none; /* 隐藏内容 */
         }
      </style>
   </head>
   <body>
      <button onclick="toggle()">点击展开/关闭</button>
      <div class="content">
         <p>我是一个可以展开和关闭的内容。</p>
      </div>
      <script src="script.js"></script>
   </body>
</html>

登录后复制

在上面的代码中，我们创建了一个按钮和一个DIV元素，DIV元素包含我们要展开或关闭的内容。我们还将DIV元素的显示设置为“none”，这样该元素就会一开始不显示。

接下来，我们需要添加一些JavaScript代码来实现展开和关闭的功能。我们将这些代码放在script.js文件中。

立即学习“Java免费学习笔记（深入）”；

let content = document.querySelector('.content');

function toggle() {
   if (content.style.display === 'none') {
      content.style.display = 'block';
   } else {
      content.style.display = 'none';
   }
}

登录后复制

在上面的代码中，我们首先使用“document.querySelector”来获取包含内容的DIV元素，并将其存储在变量“content”中。然后我们定义一个名为“toggle”的函数，该函数将在按钮被点击时调用。