Question

我尝试使用if / else语句在单击按钮时显示/隐藏元素。我遇到的问题是，当代码运行时，元素会被显示，然后再次快速隐藏。所以if块和else bock中的代码都在执行。

<html>

    <head>
        <meta charset="utf-8">
    </head>

    <body>
        <section class="variation">
            <h2 id="btn">Show and Hide</h2>
            <div class="mainContent">
                <p>Nam tincidunt erat et purus porttitor bibendum.</p>
            </div>
        </section>
        <script type="JavaScript">
            var $mainContent = $('.mainContent');
            var $variation = $('.variation h2');
            $mainContent.hide();
            $('#btn').click(function() {
                if ($mainContent.css('display') == 'none') {
                    $mainContent.show('fast');
                } else {
                    $mainContent.hide('fast');
                    console.log($mainContent.css('display'))
                }
            });
        </script>

    </body>

</html>

我在chrome和firefox中测试了这个。

P.S

我知道我可以使用jQuery toggle()方法，但我知道如何在没有它的情况下执行此操作。

Answer 1

脚本标记中有错误的type。它应该是：

 <script type="text/javascript">

不

<script type="JavaScript">

（另外，在HTML5中，如果它是JavaScript，则无需放置type属性，text/javascript是默认属性，因此您可以完全省略它）

作为奖励 - 因为除了type以外的事情，你的代码应该完全正常，这里有点扭曲的单行切换替换;） < / p>

$('#btn').click(function() {
   $mainContent[($mainContent.is(':visible')) ? 'show' : 'hide']('fast');
}

尝试使用JavaScript和jQuery单击时显示/隐藏元素

1 个答案: