Question

我有像这样的jquery手风琴脚本..

<script type='text/javascript'>
$(document).ready(function() {
  $('div.Syb> div').hide();
  $('div.Syb> h4').click(function() {
    $(this).next('div').slideToggle('fast')
    .siblings('div:visible').slideUp('fast');
  });
});
</script>

我需要在div之前显示+和 - 符号..以显示其展开和折叠..

我该怎么做。？

Answer 1

如果您不喜欢Internet Explorer 7或更少版本，那么您可以在CSS中执行此操作，这应该是理想情况下（因为它是演示文稿，而不是内容）：

div.Syb> div:before
{
    content: '+';
}
div.Syb> div.hidden:before
{
    content: '-';
}

或者你可以玩背景图片。

然后只需使用toggleClass()给你的div一个.hidden类。

如果你想直接使用jQuery，你可能需要稍微改变你的标记：

<div class="Syb">
    <h4><span>+</span>Title One</h4>
    <div id="one">Text</div>
    <h4><span>+</span>Title Two</h4>
    <div id="two">Text</div>
    <h4><span>+</span>Title Three</h4>
    <div id="three">Text</div>
</div>

然后你可以简单地改变你的jQuery：

<script type='text/javascript'>
$(document).ready(function() {
    $('div.Syb> div').hide();
    $('div.Syb> h4').click(function() {
       var span = $(this).children('span:first');
       span.text(span.text()=='+'?'-':'+');
        $(this).next('div').slideToggle('fast')
            .siblings('div:visible').slideUp('fast');
    });
});
</script>

前缀+和 - 使用jquery来div

1 个答案: