search

Home >Web Front-end >JS Tutorial >A complete example of the display and hide function implemented by jQuery with only 3 lines of code_jquery

A complete example of the display and hide function implemented by jQuery with only 3 lines of code_jquery

WBOY
WBOYOriginal
2016-05-16 15:37:201349browse

The example in this article describes the display and hiding functions implemented by jQuery with only 3 lines of code. Share it with everyone for your reference. The details are as follows:

jQuery technology is very easy to use. It can indeed achieve the desired functions with very little code. For example, this frequently used "show" and "hide" functions can be implemented with only 3 lines of code. It is indeed enough. Awesome.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-simple-hide-show-style-demo/

The specific code is as follows: 

<!doctype html>
<html>
<head>
<meta charset="gbk" />
<title>3行代码实现显示与隐藏</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style>
  .showmore{ float:left;}
  .cont .aa {
  height: auto;
  width: 400px;
  border: 1px solid #000000;
  margin-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  float: left;
  }
  .cont .aa .a1 {
  float: left;
  height: 30px;
  width: 300px;
  }
  .cont .aa .a2 {
  height: 30px;
  width: 350px;
  float: left;
  display:none;
  }
 </style>
</head>
<body>
<div class="cont">
 <div class="aa">
  <div class="a1">tab1</div>
  <div class="showmore"><a href="#"><span>显示</span></a></div>
  <div class="a2">详细说明：今天你要嫁给我嘛~</div>
 </div>
 <div class="aa">
  <div class="a1">tab2</div>
  <div class="showmore" ><a href="#"><span>显示</span></a></div>
  <div class="a2">详细说明：北京、上海四日游</div>
 </div>
 <div class="aa">
  <div class="a1">tab3</div>
  <div class="showmore" ><a href="#"><span>显示</span></a></div>
  <div class="a2">详细说明：河南是华夏文明的根源</div>
 </div>
</div>
<script>
$(".showmore a span").mouseover(function(e){
 $(this).html(["显示", "隐藏"][this.hutia^=1]);
 $(this.parentNode.parentNode).next().toggle();
 e.preventDefault();
});
</script>
</body>
</html>

I hope this article will be helpful to everyone’s jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Use the show() and hide() methods to animate and hide images in Jquery_jqueryNext article：Use the show() and hide() methods to animate and hide images in Jquery_jquery

Related articles

See more