Based on toggle, jQuery implements click trigger DIV display and hide analysis, and jquerytoggle

Based on toggle, jQuery implements click trigger DIV display and hide analysis, and jquerytoggle

This document describes how to use toggle to display and hide a click-triggered DIV. We will share this with you for your reference. The details are as follows:

After studying the display and hiding of the DIV triggered by toggle click, we can send the code.

HTML code:

<Input type = "button" id = "btn" title = "Click me you will see the effect" value = "Click here"/> <div id = "content" style =" padding: 10px; margin-top: 5px; border: 1px dotted # BBB; "> <p> switch the function to be called each time you click. <Br/> If a matching element is clicked, the specified first function is triggered. When the same element is clicked again, <br/> the specified second function is triggered. The subsequent clicks repeatedly call the two functions. You can use unbind ("click") to delete it. </P> </div>

JQuery code:

Full version:

<script src="jquery.js"></script><script language="javascript">$(function(){$("#btn").toggle(function(){$(this).click(function(){$("#content").hide();})},function(){$(this).click(function(){$("#content").show();})});})</script>

Simplified Version (recommended ):

<script src="jquery.js"></script><script language="javascript">$(function(){$("#btn").toggle(function(){$("#content").hide();},function(){$("#content").show();});})</script>

Problem:

When jQuery toggle is used, the click will flash and the DIV will pop out.

<div >   </div><div id="font_div" style="display: none;"><ul><li><a style="color: black; font-size: 10px" href="#" onclick="NYSfont2('black');return false;">■</a></li></ul><div>

As shown in the preceding figure, I want to click an image to hide and display the font_div file. However, when I click the image, the font_div file is not displayed smoothly, instead, the entire font_div is first displayed, and then displayed slowly. It's like a flash to achieve what I want! The same is true when hiding. First, hide it slowly. Then, after hiding it, it will flash again. I don't know what's going on? Please advise !!!!

Question added:

The problem is solved because there are fewer files.

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
When this line is added, there is no problem!

Solution:

Here is a simple example to achieve the above results:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">