Question

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

链接最初显示文本'show +'，然后当显示div时，此文本将变为'hide - '。代码如下：

JQUERY

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

这一切都运转良好，但后来我决定立即显示/隐藏，通过向切换添加速度逐渐显示文本会很好。因此，我修改了以下内容：

JQUERY

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

这给了我想要的过渡效果，但现在链接文本没有改变。它最初仍显示为'info +'，但从那时起，无论div是否显示，链接文本都显示为“hide - ”。

我认为这是因为不管怎样，代码总是看到div显示，即使它不是，但我不确定如何解决这个问题。

任何帮助都将不胜感激。

由于

Answer 1

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

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

JSFiddle

Answer 2

这很简单，为什么会发生这种情况。如果你在褪色后直接进行检查，它会像这样：褪色元素意味着它不被隐藏，这意味着它是可见的;淡化元素意味着它不被隐藏，这意味着它是可见的。

您可以先存储州：

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

或者，将状态存储在一个类中（如果用户要连续单击，这将更好地工作）

var vis = $(this).parent().next().toggleClass("visible").toggle("slow").hasClass("visible");

为什么添加切换速度会影响'：visible'？

2 个答案: