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