0

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

我想当我单击标题或切换按钮时，显示隐藏的内容。默认情况下，内容通过切换关闭隐藏。在我只有当我单击按钮时，按钮才会更改为 + 或 - 取决于显示或隐藏。单击标题时如何更改按钮？

这是代码：

<!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>
4

4 回答 4

1

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

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

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

    });
});
于 2012-05-12T08:56:33.717 回答
1

这可能是因为您的 .hide() 和 .show() 函数尚未完成动画。您检查您的元素是否为“动画”并像这样清除动画队列：

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

您可以清除一条线 - 如果您更喜欢：

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

这也适用于 .fadeIn()、.fadeOut()、.animated() 等。

于 2012-05-12T08:57:14.653 回答
1

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

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

于 2012-05-12T08:58:54.950 回答
1

我会改变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-12T08:59:53.573 回答