2

我正在开发一些功能，以在用户单击链接时显示包含一些文本的 div。

该链接最初显示文本“show +”，然后当显示 div 时，此文本更改为“hide -”。代码如下：

查询

    <script>
    $(document).ready(function() {
    $('p.link + div').hide();
    $('p.link a').prepend('<span>info +</span> ');

    $('p.link a').click(function(e) {
     var vis = $(this).parent().next().toggle().is(':visible');
     $(this).find('span').text(vis ? 'hide -' : 'info +');
     e.preventDefault();
    });
    });
    </script>

HTML

    <p class="link"><a href="#" class="show-hide"> </a></p>

    <div class="info">

    <p>Some sample text to show and hide</p>

    </div> <!-- info -->

这一切都很好，但后来我决定而不是立即显示/隐藏，通过在切换中添加速度来逐渐显示文本会很好。因此，我修改了以下行：

查询

    var vis = $(this).parent().next().toggle("slow").is(':visible');

这给了我想要的过渡效果，但现在链接文本没有改变。它最初仍显示为“信息+”，但从那里开始，无论是否显示 div，链接文本都显示为“隐藏 -”。

我认为这是因为代码总是以某种方式将 div 视为显示，即使它不是，但我不确定如何解决这个问题。

任何帮助，将不胜感激。

谢谢

4

2 回答 2

2

在转换完成后使用回调参数toggle来执行你的语句，而不是在之后立即执行它。

var span = $(this).find('span');
$(this).parent().next().toggle("slow", function() {
  span.text($(this).is(":visible") ? 'hide -' : 'info +');
});

JSFiddle

于 2012-11-21T16:18:17.510 回答
1

这很简单，为什么会发生。如果你在淡入淡出后立即进行检查，它是这样的：淡入一个元素意味着它没有被隐藏，这意味着它是可见的；淡出一个元素意味着它没有被隐藏，这意味着它是可见的。

您可以先存储状态：

var elem = $(this).parent().next();
var vis = elem.is(':visible');
elem.toggle("slow");

或者，将状态存储在一个类中（如果用户连续点击会更好）

var vis = $(this).parent().next().toggleClass("visible").toggle("slow").hasClass("visible");
于 2012-11-21T16:20:06.460 回答