jQuery implements HTML element hiding and display

Let's imitate Taobao's function of displaying all brands or some brands when you search for a product.

First, let's sort out our thoughts:

1. At the beginning, you need to hide the elements that need to be hidden first

2. You need to use jQuery to get the element object that needs to be hidden when it starts to display

3. Write a button or link on the page that can trigger a click event, and use jQuery to add a click event to this button or link

4. When the button is clicked, get the value of whether the object to be hidden is currently hidden

5. If it is hidden, make it visible; if it is not hidden, make it hidden.

Let's look at the code:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
  <style type="text/css">
  <!-- Here is the css, you can adjust it according to your preferences, this is not the key style-->
   *{ margin:0; padding:0;}
   body {font-size:12px;text-align:center;}
   a { color:#04D; text-decoration:none;}
   a:hover { color:#F50; 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 { clear:both; text-align:center;padding-top:10px;}
   .showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
   
   .showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
   
   .promoted a { color:#F50;}
  </style>
  <script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><!-- Import jQuery file-->
  <script type="text/javascript">
 
   $(function(){
    : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
     return false;//Finally, return false. Why return false? Because this will prevent the link from jumping//or the form button from submitting, otherwise it will jump to another page!
    })
   
   });
  </script>
 </head>
 <body>
  <div class="SubCategoryBox">
   <ul>
    <li ><a href="#" >C</a></li>
    <li ><a href="#" >C++</a></li>
    <li ><a href="#" >C#</a></li>
    <li ><a href="#" >JAVA</a></li>
    <li ><a href="#" >JAVASCRIPT</a></li>
    <li ><a href="#" >Python</a></li>
    <li><a href="#" >PHP</a></li>
    <li ><a href="#" >GO</a></li>
    <li ><a href="#" >SWIFT</a></li>
    <li ><a href="#" >RUBY</a></li>
    <li ><a href="#" >HTML</a></li>
    <li ><a href="#" >Assembly</a></li>
    <li ><a href="#" >PERL</a></li>
    <li ><a href="#" >Other programming languages</a></li>
   </ul>
   <div class="showmore">
    <a href="more.html" ><span>Show all languages</span></a><!-- Here is the link, but clicking it will not redirect. Because the above returns false -->
   </div>
  </div>
 </body>
</html>

This is how it opens at first.

After clicking the link, the event function is triggered. The small triangle is a picture. Different pictures are displayed according to the different states. The code above is written

If inside

$(".showmore a span").css("background","url(img/up.gif) no-repeat 0 0")

else

$(".showmore a span").css("background","url(img/down.gif) no-repeat 0 0")

Of course, the text of the link has also changed, which are details that need attention.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

jQuery various methods to determine whether an element is hidden
jQuery code to determine whether an element is hidden
How to hide elements by clicking on blank space in jquery
Summary of JQuery methods for displaying hidden page elements
jQuery uses the hide method to hide the specified element class style usage example
Summary of jQuery's methods for controlling element display, hiding, switching, and sliding
Jquery shows, hides elements, adds and deletes styles
jQuery uses the hide method to hide the element with the specified id
Hide all elements under jquery form
jQuery determines whether an element is displayed or hidden.

<<: CentOS8 - bash: garbled characters and solutions

>>: Analysis of the principle and usage of MySQL continuous aggregation

Summary of MySql index, lock, and transaction knowledge points

jQuery implements HTML element hiding and display

Summary of MySql index, lock, and transaction knowledge points

Let's talk about the performance of MySQL's COUNT(*)

Detailed explanation of building a continuous integration cluster service based on docker-swarm

Characteristics of JavaScript arrow functions and differences from ordinary functions

MySQL insert json problem

Don’t bother with JavaScript if you can do it with CSS

Detailed explanation of important cascading concepts in CSS

js tag syntax usage details

MySQL slow query method and example

Detailed example of locating and optimizing slow query sql in MySQL

Recommend

Use personalized search engines to find the personalized information you need

Detailed explanation of Alibaba Cloud security rule configuration

SQL merge operation of query results of tables with different columns

Website background music implementation method

Summary of 4 solutions for returning values on WeChat Mini Program pages

Example code for implementing the wavy water ball effect using CSS

What is the function of !-- -- in HTML page style?

Collection of 12 practical web online tools

Linux parted disk partition implementation steps analysis

A comprehensive analysis of what Nginx can do

UCenter Home site adds statistics code

How to manage large file uploads and breakpoint resume based on js

Three examples of nodejs methods to obtain form data

Nofollow makes the links in comments and messages really work

React homepage slow loading problem performance optimization case detailed explanation