JS实现“隐藏与显示”功能(多种方法)

JS实现“隐藏与显示”功能是Web开发中常用的交互效果。下面我将为大家介绍几种实现方法，并演示两个简单的示例。

方法一：使用jQuery实现“隐藏与显示”功能

在使用jQuery实现“隐藏与显示”功能时，可以调用jQuery的方法实现DOM元素的隐藏和显示。以下是实现代码：

// 隐藏元素
$("#element").hide();

// 显示元素
$("#element").show();

示例一：点击按钮隐藏和显示图片

<!-- HTML结构 -->
<button id="btn">点击隐藏和显示图片</button>
<img id="image" src="image.jpg" alt="图片">

<!-- JavaScript代码 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
  $("#btn").click(function(){
    $("#image").toggle();
  });
</script>

示例二：鼠标悬停时显示隐藏的菜单

<!-- HTML结构 -->
<div id="menu">
  <a href="#">菜单1</a>
  <a href="#">菜单2</a>
  <a href="#">菜单3</a>
</div>

<!-- JavaScript代码 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
  $("#menu").hide(); // 初始隐藏菜单

  $("li").hover(function(){
    $("#menu").show();
  },function(){
    $("#menu").hide();
  });
</script>

方法二：使用原生JavaScript实现“隐藏与显示”功能

在使用原生JavaScript实现“隐藏与显示”功能时，需要使用DOM API操作DOM元素的样式。以下是实现代码：

// 隐藏元素
document.getElementById("element").style.display = "none";

// 显示元素
document.getElementById("element").style.display = "block";

示例三：点击按钮隐藏和显示段落

<!-- HTML结构 -->
<button id="btn">点击隐藏和显示段落</button>
<p id="par">这里是段落内容</p>

<!-- JavaScript代码 -->
<script>
  document.getElementById("btn").addEventListener("click",function(){
    var par = document.getElementById("par");
    if(par.style.display == "none"){
      par.style.display = "block";
    }else{
      par.style.display = "none";
    }
  },false);
</script>

示例四：鼠标悬停时显示隐藏的菜单

<!-- HTML结构 -->
<div id="menu">
  <a href="#">菜单1</a>
  <a href="#">菜单2</a>
  <a href="#">菜单3</a>
</div>

<!-- JavaScript代码 -->
<script>
  document.getElementById("menu").style.display = "none"; // 初始隐藏菜单

  document.getElementById("nav").addEventListener("mouseover",function(){
    document.getElementById("menu").style.display = "block";
  },false);

  document.getElementById("nav").addEventListener("mouseout",function(){
    document.getElementById("menu").style.display = "none";
  },false);
</script>

以上就是“JS实现‘隐藏与显示’功能(多种方法)”完整攻略，希望对大家有所帮助。