（8）导航栏中“更多”按钮的显示与隐藏简单演示

最新推荐文章于 2024-09-21 17:41:35 发布

无人与我共黄昏

最新推荐文章于 2024-09-21 17:41:35 发布

阅读量2.4k

点赞数 1

分类专栏： JavaScript案例解析

本文链接：https://blog.csdn.net/Xuan6251237011/article/details/26939367

版权

JavaScript案例解析同时被 2 个专栏收录

42 篇文章 0 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

JavaScript代码

42 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何通过JavaScript和CSS实现导航栏中‘更多’按钮的显示与隐藏效果。利用display属性切换none和block，配合if-else判断，实现点击按钮时内容的动态显示和隐藏，提供了一种简单的交互体验。

摘要由CSDN通过智能技术生成

思路：

在网中中一级导航栏中有“更多”的按钮，当按下的时候会显示出更多的内容出来，但在显示的时候如果再按则会隐藏。
主要使用display属性的none和block
当用户点击的时候div显示的话就隐藏掉，否则就显示出来

主要用到if-else判断

代码如下：

<!DOCTYPE HTML>
<!--
	在网中中一级导航栏中有“更多”的按钮，当按下的时候会显示出更多的内容出来，但在显示的时候如果再按则会隐藏。
	主要使用display属性的none和block
 	当用户点击的时候div显示的话就隐藏掉，否则就显示出来
-->
<html>
<head>
<meta charset="utf-8">
<title></title>

<style>
#div1{
	width:100px;
	height:200px;
	background:#0000FF;
	display:none;//一开始不显示
}

了解本专栏