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的切換不會立即響應

回答

相關問題