Jquery Toggle function not working!
I have made a little Jquery after thinking a lot (as I'm new to this), and found it not working properly! See, in my code I suppose to click on the element which is set by the var trigger and the element which is set by the var obj should fadeToggle() but when I click on the trigger for one moment it is shown (just a second barely!) and then disappears! I just don't what is going wrong, but you can have a live demo (to see the problem). And by the way code is down here --
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js" ></script>
<script type="t开发者_如何转开发ext/javascript">
$(document).ready(function () {
$(function () {
var trigger = 'trigger' ;
var obj = 'slide' ;
$('.' + trigger).click(function () {
$('.' + obj).fadeToggle();
});
});
});
</script>
<style>
div.head
{
background: #000;
opacity: 0.7;
color: #fff;
font-weight: bold;
font-size: 12px;
font-family: segoe ui;
padding: 5px 5px;
}
div.head a
{
text-decoration: none;
color: #fff;
}
div.slide
{
display: none;
background: #000;
opacity: 0.7;
color: #fff;
font-weight: bold;
font-size: 12px;
font-family: segoe ui;
padding: 5px 5px;
}
</style>
</head>
<body>
<div class="head">
<a class="trigger" href="">Click Me!</a>
<div class="slide">
Hi Friends!
</div>
</div>
</body>
</html>
On jsFiddle it is showing me the following error (only when you click RUN before doing something on the RESULT field.) --
{"error": "Please use POST request"}
Can anyone help me out with this problem. Thanks in advance!
It looks like your link is being followed. You can prevent that from happening like this:
$('.' + trigger).click(function(e) {
e.preventDefault();
$('.' + obj).fadeToggle();
});
$('.trigger').click(function(e) {
e.preventDefault();
$('.slide').fadeToggle();
});
Also, you do do not need to have 2 ready functions.
$(document).ready(function () {
is the same as
$(function () {
Check working example at http://jsfiddle.net/RfgkU/
You don't need $(document).ready(function () {
$(function(){}); is good enough to specify the commands must run on page load. This also works consistently across all browsers.
Also specify e.preventDefault(); as the first line in your click function to tell jQuery to ignore the click on the link.
It's the display: none attribute that causes this beaviour.
Try putting it inline:
<div class="slide" style="display:none;">
加载中,请稍侯......
精彩评论