jQuery uses hide() and toggle() functions to realize the camera brand display hiding function
|
Recently, when I was learning jQuery, I came across the show(), hide(), and toggle() functions. So I used these functions to practice a case of showing and hiding elements: Tip: The small icons for switching the buttons up and down in the code can be obtained from the brand display function image in this link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Use hide() and toggle() functions to display camera brands</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
text-align: center;
}
a {
color: #04D;
text-decoration: none;
}
a:hover {
color: #F50;
/*The text-decoration attribute specifies the decoration added to the text, such as underline, overline, strikethrough, etc. */
text-decoration: underline;
}
.SubCategoryBox {
width: 600px;
margin: 0 auto;
text-align: center;
margin-top: 40px;
}
.SubCategoryBox ul {
list-style: none;
}
.SubCategoryBox ul li {
display: block;
float: left;
width: 200px;
line-height: 20px;
}
.showmore, .showless {
clear: both;
text-align: center;
padding-top: 10px;
}
.showmore a, .showless a {
display: block;
width: 120px;
margin: 0 auto;
line-height: 24px;
border: 1px solid #AAA;
}
.showmore a span {
padding-left: 15px;
/*The last two digits are offset from the upper left corner (0,0). The first digit is the offset on the X-axis, that is, the horizontal offset. Positive means right, negative means left!
The second number is the offset on the Y axis, that is, the horizontal offset, positive means downward, negative means upward!*/;
background: url(img/down.gif) no-repeat 0 3px;
}
.showless a span {
padding-left: 15px;
background: url(img/up.gif) no-repeat 0 3px;
}
.promoted a {
color: #F50;
}
</style>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//After the page is loaded, hide some camera brands first $("ul li:gt(5):not(:last)").hide();
// The filter function filters out the set of elements that match the specified expression. This method is used to narrow the matching range. Use commas to separate multiple expressions // Here we filter out the camera brands that need to be styled separately var multiPromoted = $("li").filter(":contains('Canon'),:contains('Sony'),:contains('Kodak')");
// Get the a tag binding click event $("div div a").click(function () {
// Switch between showing and hiding some camera brands$("ul li:gt(5):not(:last)").toggle();
// Replace text content, superscript images, and remove the text style of the a tag under li when hiding some camera brands if ($("ul li:gt(5):not(:last)").is(":hidden")) {
$("a > span").html("Show all brands");
$("div div").removeClass();
$("div div").addClass("showmore");
$(multiPromoted).removeClass("promoted");
} else {
// When displaying some camera brands, replace the text content, superscript image, and add the a tag text style under li$("a > span").html("Display simplified brands");
$("div div").removeClass();
$("div div").addClass("showless");
$(multiPromoted).addClass("promoted");
}
});
});
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">Canon</a><i>(30440) </i></li>
<li><a href="#">Sony</a><i>(27220) </i></li>
<li><a href="#">Samsung</a><i>(20808) </i></li>
<li><a href="#">Nikon</a><i>(17821) </i></li>
<li><a href="#">Panasonic</a><i>(12289) </i></li>
<li><a href="#">Casio</a><i>(8242) </i></li>
<li><a href="#">Fuji</a><i>(14894) </i></li>
<li><a href="#">Kodak</a><i>(9520) </i></li>
<li><a href="#">Pentax</a><i>(2195) </i></li>
<li><a href="#">Ricoh</a><i>(4114) </i></li>
<li><a href="#">Olympus</a><i>(12205) </i></li>
<li><a href="#">BenQ</a><i>(1466) </i></li>
<li><a href="#">Patriot</a><i>(3091) </i></li>
<li><a href="#">Other Brand Cameras</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="#"><span>Show all brands</span></a>
</div>
</div>
</body>
</html>Code running effect:
Function display effect:
This is the end of this article about how jQuery uses hide() and toggle() functions to display and hide camera brands. For more information about how jQuery uses hide() and toggle() functions to display and hide camera brands, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: A complete record of a Mysql deadlock troubleshooting process
>>: How to create and run a Django project in Ubuntu 16.04 under Python 3
Recommend
Detailed introduction to MySQL database index
Table of contents Mind Map Simple understanding E...
Setting up shadowsocks+polipo global proxy in Linux environment
1. Install shadowsocks sudo apt-get install pytho...
Sample code for implementing water drop ripple animation button effect with CSS+JS
The code looks like this: <!DOCTYPE html> &...
Detailed tutorial on installing and configuring MySQL 5.7.20 under Centos7
1. Download the MySQL 5.7 installation package fr...
MySQL replication table details and example code
MySQL replication table detailed explanation If w...
Installation of Ubuntu 18.04 reports: failed to load ldlinux.c32 and its solution steps
Preface I have an old laptop with Win7. In order ...
An article to understand Linux disks and disk partitions
Preface All hardware devices in the Linux system ...
The difference between two MySQL delete user statements (delete user and drop user)
Tip: In MySQL, we often need to create and delete...
WeChat applet example of using functions directly in {{ }}
Preface In WeChat applet development (native wxml...
HTML multi-header table code
1. Multi-header table code Copy code The code is a...
An example of elegantly writing status labels in Vue background
Table of contents Preface optimization Extract va...
7 skills that great graphic designers need to master
1》Be good at web design 2》Know how to design web p...
How to solve the problem of installing VMware tools under VMware and the installation file not appearing
VMware tools provides great convenience for using...
React's transition from Class to Hooks
Table of contents ReactHooks Preface WhyHooks? Fo...
Mycli is a must-have tool for MySQL command line enthusiasts
mycli MyCLI is a command line interface for MySQL...