Question

我在jquery中有一个切换，你可以在这里看到它：http://jsfiddle.net/Rua4j/

我希望当我点击标题或切换按钮时，会显示隐藏的内容。默认情况下，内容通过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>

Answer 1

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

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

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

    });
});

Answer 2

这可能是因为您的.hide（）和.show（）函数尚未完成动画。您检查您的元素是否为“动画”并清除动画队列，如下所示：

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

你可以清理一条线 - 如果你更喜欢这条线：

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

这也适用于.fadeIn（）,. fadeOut（）,. animated（）等。

Answer 3

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

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

Answer 4

我会更改css，因此它已被隐藏，然后jquery将从那里切换...

add display：none;到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>

Jquery切换不会立即响应

4 个答案: