Javascript Jquery切换不会立即响应_Javascript_Jquery_Jquery Ui

Javascript Jquery切换不会立即响应

javascript jquery jquery-ui

Javascript Jquery切换不会立即响应,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我在jquery中有一个切换，您可以在这里看到：我希望在单击标题或切换按钮时，显示隐藏的内容。默认情况下，内容通过切换关闭隐藏。在我只有单击按钮时，按钮才会更改为+或-取决于显示或隐藏。单击标题时如何更改按钮代码如下： <!DOCTYPE html PUBLIC "> <head> <title>Faqs Toggle</title> <style> .container{ width:940px; } h3{ color:rgb(

我在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;
}
</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>

单击标题时必须调用函数：
 $(function(){
    $('#togglenav').click(function(){

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

    });
});

单击标题时必须调用函数：
 $(function(){
    $('#togglenav').click(function(){

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

    });
});

这可能是因为.hide（）和.show（）函数尚未完成动画。
检查元素是否“已设置动画”，并按如下方式清除动画队列：
if ($("#toggleContent").is(":animated")) {
    $("#toggleContent").stop(true, true);
    $("#toggleContent").show("fast");
}

如果您更喜欢，您可以整理一行：
$("#toggleContent").stop(true, true).show("fast");

这也适用于.fadeIn（）、.fadeOut（）、.animated（）等。这可能是因为.hide（）和.show（）函数尚未完成动画。
检查元素是否“已设置动画”，并按如下方式清除动画队列：
if ($("#toggleContent").is(":animated")) {
    $("#toggleContent").stop(true, true);
    $("#toggleContent").show("fast");
}

如果您更喜欢，您可以整理一行：
$("#toggleContent").stop(true, true).show("fast");

这也适用于.fadeIn（），.fadeOut（），.animated（）等。
有一个经过修改的版本，似乎可以按预期工作
有一个经过修改的版本，似乎可以按预期工作
我将更改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>



我将更改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>



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