当我尝试使用切换时,jquery jquery-1.9.0将div设置为display:none

时间:2013-02-16 13:22:20

标签: javascript jquery css jquery-ui

我正在通过阅读本书来学习jQuery(顺便说一句,这本书非常好。)

当我进行教程5练习时,我注意到jQuery总是设置为:none AUTOMATICALLY使用jquery-1.9.0。当我改为较低版本(例如1.8.3或1.6.3)时,它们似乎运行良好。想知道你是否遇到过同样的问题?你有没有使用1.9.0版本进行解决?

以下是我的代码。您也可以从(http://sawmac.com/js2e/第5章/ complete_faq.html)

下载
<html>
<head>
    <meta charset="UTF-8">
    <title>A One Page Faq</title>
    <link href="../_css/site.css" rel="stylesheet">
    <style type="text/css">
        h2
        {
            background: url(../_images/open.png) no-repeat 0 11px;
            padding: 10px 0 0 25px;
            cursor: pointer;
        }

            h2.close
            {
                background-image: url(../_images/close.png);
            }

        .answer
        {
            margin-left: 25px;
        }
    </style>
    <script src="jquery-1.9.0.js"></script>

    <script>
        $(document).ready(function () {
            $('.answer').hide();
            $('.main h2').toggle(
                   function () {
                       $(this).next('.answer').slideDown();
                       $(this).addClass('close');
                   },
                   function () {
                       $(this).next('.answer').fadeOut();
                       $(this).removeClass('close');
                   }
               ); // end toggle
        }); // end ready
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>
                Missing<br>
                Manual</i></p>
        </div>
        <div class="content">
            <div class="main">
                <h1>A One Page FAQ</h1>
                <h2>I've heard that JavaScript is the long-lost fountain of youth. Is this true?</h2>
                <div class="answer">
                    <p>Why, yes it is! Studies prove that learning JavaScript freshens the mind and extends life span by several hundred years. (Note: some scientists disagree with these claims.)</p>
                </div>
                <h2>Can JavaScript really solve all of my problems?</h2>
                <div class="answer">
                    <p>Why, yes it can! It's the most versatile programming language ever created and is trained to provide financial management advice, life-saving CPR, and even to take care of household pets.</p>
                </div>
                <h2>Is there nothing JavaScript <em>can&#8217;t</em> do?</h2>
                <div class="answer">
                    <p>Why, no there isn&#8217;t! It&#8217;s even able to write its own public relations-oriented Frequently Asked Questions pages. Now that&#8217;s one smart programming language!</p>
                </div>
            </div>
            <div class="footer">
                <p>JavaScript &amp; jQuery: The Missing Manual, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
            </div>
        </div>
        </div>
</body>
</html>

2 个答案:

答案 0 :(得分:2)

jQuery 1.8中已弃用.toggle()函数,并在jQuery 1.9中将​​其删除。

  

<强> .toggle(function, function, ... ) removed

     

这是“点击运行指定函数的元素”签名.toggle()。不应该将.toggle()的“更改元素的可见性”与未弃用的内容混淆。 前者被删除以减少混淆并提高库中模块化的可能性。 jQuery Migrate plugin可用于恢复功能。

虽然,如果你完全停止使用它会更好。

答案 1 :(得分:0)

正如Alexander提及的其他答案提到.toggle()已从jQuery version 1.9.0+中删除,但如果您使用的migrate plugin肯定会有效。

如果要使用jQuery 1.9.0+

,请在jQuery下面添加此迁移插件脚本
<script src="jquery-1.9.0.js"></script>
<script src='http://code.jquery.com/jquery-migrate-1.1.0.min.js'></script>