Of Stack

jQuery Realizes click Triggering DIV Display and Hide Problem Analysis Based on toggle

  • 2021-06-28 10:15:28
  • OfStack

This article gives an example of how jQuery can trigger the display and hide of DIV based on toggle.Share it for your reference, as follows:

After investigating the first time click of toggle triggered the display and hiding of DIV, send the code now.

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 clicked 1 Matching elements, triggers the specified 1 Function, when clicking the same again 1 When element, <br />
 Then trigger the specified 2 Functions.Each subsequent click repeats a round-robin call to both functions. 
 have access to unbind("click") To delete.  </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>

Short form (recommended): 


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

Question:

When using jQuery toggle, the click will flash once before DIV comes out 


<div >
   <img src="${ctx }/images/face.png" height="20" onclick="Effect.toggle('font_div','slide'); return false;" />
</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 above, I would like to click on a picture to implement font_div hides and displays, but the reality is that when I click on this picture, font_The div section is not displayed smoothly, but first the entire font_div is displayed, then slowly displays again.It's like a flash to get the result I want!When hiding is the same, hide slowly first, and then flash once after hiding.Don't know what's wrong?Please advise!!!!

Question additions:

The problem was solved because there were fewer files in it

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
Add this one line and you'll have no more questions!

Resolvent:

Here is a simple example to achieve the above effect: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Untitled Document </title>
<script src="jquery.js"></script>
<script>
$(function(){
 $("#shift").click(function(){
$("p").slideToggle("slow");
  });
});
</script>
</head>
<body>
<div >
<input type="button" id="shift"value=" click here " />
<p style="display:none"> I want to click 1 Picture implementation font_div Hide and show, but the reality is when I click on this picture font_div Some of them don't work very well, but the whole one first font_div Show it, then slowly show it again.It's like a flash 1 Next, do what I want!Hidden time is also 1 Then hide it slowly, then flash after hiding it 1 Down.Don't know what's wrong?Please advise!!!! </p>
</div>
</body>
</html>

More readers interested in jQuery-related content can view this site's topics: Ajax Usage Summary in jquery, jQuery Table (table) Operation Skills Summary, jQuery Dragging Special Effects and Skills Summary, jQuery Extension Skills Summary, jQuery General Classic Special Effects Summary, jQuery Animation and Usage Summary,jquery Selector Usage Summary and jQuery Common Plugins and Usage Summary

I hope that the description in this paper will be helpful to everyone's jQuery program design.

Related articles: