Question

所有这一切的新手，并在这里搜索过，我仍然把头发拉出来。请温柔。我正在使用Andy Langton的show hide手风琴，除了IE 8（并假设之前的版本）在所有浏览器中都能很好地运行。在IE 8中点击阅读更多的切换使得下拉文本开始显示一点（看起来像所有的线条已写入一行）然后缩回，切换链接保持不变。在这里阅读类似问题我将js版本号从jquery / 1.3.2改为jquery / 1.8.3这显示了应该做的“隐藏文本”，但是togglelink没有改变，它仍然是'read more'什么时候应该说'隐藏'。

我假设我已经走上正轨，因为问题已经解决了（尽管会产生不同的问题）所以问题是我应该使用什么版本的jquery？

的Javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
    var showText = 'Leer M&aacute;s'; //Read more
    var hideText = 'Ocultar'; //Hide
    var is_visible = false;
    $('.toggle').prev().append(' (<a href="#" class="toggleLink">' + showText + '</a>)');
    $('.toggle').hide();
    $('a.toggleLink').click(function () {
        $(this).toggleClass('visible');
        $(this).html(($(this).hasClass('.visible')) ? hideText : showText);
        $(this).parent().next('.toggle').toggle('slow');
        return false;
    });
});
</script>

HTML

...
<a href="#" class="toggleLink"></a>
<span class="toggle"><br>
<span class= "ticktext"><span>
...

Answer 1

您的错误在这里

$(this).html(($(this).hasClass('.visible')) // <-- extra .

你想要的是

$(this).html(($(this).hasClass('visible'))

除非你有一类

class='.visible'

你没有，因为你正在切换这个$(this).toggleClass('visible');导致

class='visible'

虽然我认为它没有意义，因为它适用于其他浏览器？

它确实解释了为什么它继续读取更多...因为它总是计算为false - 因此showText将始终显示

$(this).hasClass('.visible')) ? hideText : showText

Answer 2

因为您使用的是jquery 1.8，所以必须使用on委托事件来动态添加元素

$(document).on('click','a.toggleLink',function() {
    $(this).toggleClass('visible');
    $(this).html( ($(this).hasClass('.visible')) ? hideText : showText);
    $(this).parent().next('.toggle').toggle('slow');
    return false;
});

在IE 8中，Jquery脚本show hide无法正常工作

HTML

2 个答案: