jQuery的切换不会立即响应

我有一个切换jQuery中，你可以看到它在这里：http://jsfiddle.net/Rua4j/jQuery的切换不会立即响应

当我点击标题或切换按钮，我想，隐藏的内容是shown.By默认情况下，内容通过toggle- off隐藏。我只有当我点击按钮时，按钮才会变为+或 - 取决于显示或隐藏。当我点击标题时，如何更改按钮？

这里是代码：

<!DOCTYPE html PUBLIC "> 
<head> 
<title>Faqs Toggle</title> 
<style> 
.container{ 
width:940px; 
} 
h3{ 
color:rgb(168,168,168); 
} 
p{ 
font-size:16px; 
line-height:22px; 
} 
mark{ 
background-color:orange; 
font-weight:bold; 
    -webkit-border-radius:3px; 
     -moz-border-radius:3px; 
      border-radius:3px; 
} 
.lead{ 
font-size:18px; 
line-height:24px; 
font-weight:normal; 
color:rgb(104,104,104); 
} 
#togglenav{ 
font-color:green; 
} 
.green{ 
cursor:pointer; 
color:green; 
} 
span.green{ 
font-weight:bold; 
font-style:italic; 
} 
#toggleContainer{ 
width:66%; 
border-bottom:1px solid green; 
} 
</style> 
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script> 
<script type='text/javascript'> 
$(function(){ 
if($('#toggleContent').hasClass('toggle-off')) 
{ 
$('#toggleContent').hide("slow"); 
} 
else 
{ 
$('#toggleContent').show("slow"); 
} 
}) 

$(function(){ 
    $('.green').click(function() { 
    if($(this).val() == "+") { 
$('#toggleContent').show("slow"); 
    $(this).val("-"); 
    } 
    else { 
    $('#toggleContent').hide("slow"); 
    $(this).val("+"); 
    } 
}); 
}); 
</script> 
</head> 

<body> 
<div class="container"> 
<h3>Faq Toggles</h3> 

<div class="tgl" id="toggleContainer"> 
<div id="togglenav"> 
<input type='button' value='+' class="green" /> 
<span class="green">Vestibulum massa risus, aliquam sit amet dapibus sit amet</span><br/> 
</div> 
<div class="toggle-off" id="toggleContent"> 
<p class="lead">Vestibulum massa risus, aliquam sit amet dapibus sit amet, aliquet sed lectus. Morbi ultricies, nibh a placerat convallis, erat magna posuere nisi, sit amet iaculis dui velit at lorem.</p> 
<p> 
Sed felis purus, faucibus ut dapibus ac, ullamcorper at lorem. In ut eros congue lectus interdum fringilla vel commodo nisi. Maecenas magna quam, dapibus at malesuada nec, vestibulum ut tortor. Quisque blandit lectus a quam suscipit non fermentum erat consectetur. Sed iaculis lacinia augue, nec scelerisque metus <mark>placerat</mark> vel. 
</p> 
</div> 
</div> 
</div> 
</body> 
</html>

来源

2012-05-12 Gandalf

必须调用函数时，标题点击：

$(function(){ 
    $('#togglenav').click(function(){ 

     if($('#toggleContent').is(':visible')){ 
      $('#toggleContent').hide("slow"); 
      $('.green').val("+"); 
     } else { 
      $('#toggleContent').show("slow"); 
      $('.green').val("-"); 
     } 

    }); 
});

来源

2012-05-12 08:56:33

这可能是因为您.hide（）和.show（）函数没有完成动画呢。你检查你的元素是否“动画”和清晰的像这样的动画队列：

if ($("#toggleContent").is(":animated")) { 
    $("#toggleContent").stop(true, true); 
    $("#toggleContent").show("fast"); 
}

您可以清理线路 - 如果你喜欢更多：

$("#toggleContent").stop(true, true).show("fast");

这工作也为.fadeIn（），.fadeOut（），.animated（）等

来源

2012-05-12 08:57:14 benqus

有修改的版本，似乎按预期工作

http://jsfiddle.net/Rua4j/3/

来源

2012-05-12 08:58:54

我已将其他选择器添加到按钮（.btn） –

我会改变的CSS所以它已经隐藏，然后jQuery将在那里进行切换上...

添加显示：无;在CSS

在div＃togglecontent然后换jQuery来获得摆脱第一功能的完全

这里是代码。

<!DOCTYPE html PUBLIC "> 
<head> 
<title>Faqs Toggle</title> 
<style> 
.container{ 
width:940px; 
} 
h3{ 
color:rgb(168,168,168); 
} 
p{ 
font-size:16px; 
line-height:22px; 
} 
mark{ 
background-color:orange; 
font-weight:bold; 
    -webkit-border-radius:3px; 
     -moz-border-radius:3px; 
       border-radius:3px; 
} 
.lead{ 
font-size:18px; 
line-height:24px; 
font-weight:normal; 
color:rgb(104,104,104); 
} 
#togglenav{ 
font-color:green; 
} 
.green{ 
cursor:pointer; 
color:green; 
} 
span.green{ 
font-weight:bold; 
font-style:italic; 
} 
#toggleContainer{ 
width:66%; 
border-bottom:1px solid green; 
} 
    #toggleContent{ 
    display:none; 
    } 
</style> 
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script> 
<script type='text/javascript'> 
$(function(){ 
    $('#togglenav').click(function() { 
    if($('.green').val() == "+") { 
     $('#toggleContent').show("slow"); 
     $('.green').val("-"); 
    }else { 
     $('#toggleContent').hide("slow"); 
     $('.green').val("+"); 
    } 
    }); 
}); 
</script> 
</head> 

<body> 
<div class="container"> 
<h3>Faq Toggles</h3> 

<div class="tgl" id="toggleContainer"> 
<div id="togglenav"> 
<input type='button' value='+' class="green" /> 
<span class="green">Vestibulum massa risus, aliquam sit amet dapibus sit amet</span><br/> 
</div> 
<div id="toggleContent"> 
<p class="lead">Vestibulum massa risus, aliquam sit amet dapibus sit amet, aliquet sed lectus. Morbi ultricies, nibh a placerat convallis, erat magna posuere nisi, sit amet iaculis dui velit at lorem.</p> 
<p> 
Sed felis purus, faucibus ut dapibus ac, ullamcorper at lorem. In ut eros congue lectus interdum fringilla vel commodo nisi. Maecenas magna quam, dapibus at malesuada nec, vestibulum ut tortor. Quisque blandit lectus a quam suscipit non fermentum erat consectetur. Sed iaculis lacinia augue, nec scelerisque metus <mark>placerat</mark> vel. 
</p> 
</div> 
</div> 
</div> 
</body> 
</html>

来源

2012-05-12 08:59:53

jQuery的切换不会立即响应

回答

相关问题