乐趣区

关于jquery:jQuery-实现显示与隐藏效果

jiezi

本节咱们来学习如何应用 jQuery 中的办法来实现元素的显示与暗藏效。

hide() 办法

hide() 办法用于暗藏指定的元素，与 CSS 中的 display:none 成果相似。

语法如下所示：

$(selector).hide(speed,easing,callback)
  • speed：可选，规定暗藏成果的速度。可选值为 slow、fast、毫秒。
  • easing：可选，规定在动画的不同点上元素的速度，可选值为 swing、linear。
  • callback：可选，hide() 办法执行完之后，要执行的函数。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛 (9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){$("button").click(function(){$(".fruit").hide('slow','linear');
     });
  });
</script>
</head>
<body>
  <div>
    <button> 暗藏上面内容 </button>
    <div class="fruit"> 
      <p> 我喜爱的水果：</p>
      <ul>
        <li> 西瓜 </li>
        <li> 苹果 </li>
        <li> 香蕉 </li>
        <li> 桃子 </li>
        <li> 哈密瓜 </li>
      </ul>
    </div>
  </div>
</body>
</html>

在浏览器中的演示成果：

show() 办法

show() 办法用于显示暗藏的指定元素。与 CSS 中 display:none 的成果相似。

语法如下所示：

$(selector).show(speed,easing,callback)

show() 办法中的参数和 hide() 办法中参数相似。

示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛 (9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){$(".hide").click(function(){$(".fruit").hide('slow','linear');
     });
     $(".show").click(function(){$(".fruit").show('slow','linear');
     });
  });
</script>
</head>
<body>
  <div>
    <button class="hide"> 暗藏上面内容 </button>
    <button class="show"> 显示上面内容 </button>
    <div class="fruit"> 
      <p> 我喜爱的水果：</p>
      <ul>
        <li> 西瓜 </li>
        <li> 苹果 </li>
        <li> 香蕉 </li>
        <li> 桃子 </li>
        <li> 哈密瓜 </li>
      </ul>
    </div>
  </div>
</body>
</html>

在浏览器中的演示成果：

toggle() 办法

下面示例中咱们在实现显示和暗藏成果时，须要应用两个按钮别离管制。那么有没有方法只通过一个按钮就能够实现显示和暗藏成果呢。这就须要用到 toggle() 办法了，toggle() 办法能够用于切换 hide() 和 show() 办法。

语法如下所示：

$(selector).toggle(speed,callback,switch)
  • speed：可选，规定元素从可见到暗藏的速度，可选值又 slow、normal、fast、毫秒。
  • callback：可选，toggle 函数执行完之后，要执行的函数。
  • switch：可选，规定 toggle 是否暗藏或显示所有被选元素。True 示意显示所有元素，False 示意暗藏所有元素。如果设置此参数，则无奈应用 speed 和 callback 参数。
示例：

例如实现上述示例成果，咱们只须要像上面这样写即可，次要是批改 jQuery 代码局部：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛 (9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){$(".toggle").click(function(){$(".fruit").toggle(1000);
    });
  });
</script>
</head>
<body>
  <div>
    <button class="toggle"> 切换显示与暗藏 </button>
    <div class="fruit"> 
      <p> 我喜爱的水果：</p>
      <ul>
        <li> 西瓜 </li>
        <li> 苹果 </li>
        <li> 香蕉 </li>
        <li> 桃子 </li>
        <li> 哈密瓜 </li>
      </ul>
    </div>
  </div>
</body>
</html>

在浏览器中的演示成果：

咱们来看一下区别，应用 show() 和 hide() 办法须要的代码：

$(function(){$(".hide").click(function(){$(".fruit").hide('slow','linear');
     });
     $(".show").click(function(){$(".fruit").show('slow','linear');
     });
  });

应用 toggle() 办法须要的代码：

$(function(){$(".toggle").click(function(){$(".fruit").toggle(1000);
    });
});

所以很显著，在须要实现暗藏和显示两种成果互相切换时，应用 toggle() 办法是很不便的。

链接：https://www.9xkd.com/

退出移动版