show()和hide()函数在jQuery 1.11.1中不起作用

时间:2014-08-04 11:17:32

标签: jquery

  <!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    </style>

</head>

<body>

    <a href="#" id='hide_show'>Hide</a>
    <div id='message' style='font-size:14px; padding:10px; width:300px; border:1px solid red; margin-top:20px;'>Under Direction, click Up to search from the current cursor position to the top of the document, or click Down to search from the cursor position to the bottom of the document. Under Direction, click Up to search from the current cursor position to the top of the document, or click Down to search from the cursor position to the bottom of the document.Under Direction, click Up to search from the current cursor position to the top of the document, or click Down to search from the cursor position to the bottom of the document.</div>


    <script src='js/jquery.js'></script>
    <script src='js/jquery_ui.js'></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#hide_show').toggle(function() {
                $('#hide_show').text('Show');
                $('#message').hide();
            }, function() {
                $('#hide_show').text('Hide');
                $('#message').show();
            });

        });
    </script>


</body>

</html>

以上代码未给出实际结果...当我在浏览器中检查链接时,隐藏&#39;正在突然消失......有些人可以帮我解决这个问题......而且我在控制台上也没有任何错误。

1 个答案:

答案 0 :(得分:3)

jQuery 1.9中toggle was removed的这种特殊格式

尝试

$(document).ready(function () {
    $('#hide_show').click(function () {
        $('#hide_show').text(function (i, text) {
            return $.trim(text) == 'Hide' ? 'Show' : 'Hide'
        });
        $('#message').toggle();
    });
});

演示:Fiddle