Question

我有两个包含单独内容的div。当用户加载页面时显示第一个div的内容，并隐藏第二个div的内容。当用户点击第二个div时，第一个div的内容消失，第二个div的内容现在可见。但如果用户在可见时点击任一div，则div的内容会消失。我不熟悉javascript，发现我在网上使用的大部分代码，并且想知道如何制作它，以便当div的内容可见时，点击它时它不会消失。

<!doctype html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <script src="js/jquery.js"></script>
        <script>
            $(document).ready(function() {
                $("#div1_text").click(function() {
                    if ($(this).next().is(":hidden")) {
                        $(this).next().slideDown(300);
                        $("#div2_text").next().slideUp(300);
                    } else {
                        $(this).next().hide(300);
                    }
                    if ($(this).next().is(":visible")) {

                    }
                });
                $("#div2_text").click(function() {
                    if ($(this).next().is(":hidden")) {
                        $(this).next().slideDown(300);
                        $("#div1_text").next().slideUp(300);
                    } else {
                        $(this).next().hide(300);
                    }
                    if ($(this).next().is(":visible")) {

                    }
                });
            });
        </script>
        <style>
        html {
            background: #34495e;
        }
        #div1 {
            background: rgba(255, 255, 255, 0.70);
            width: 100%;
            height: auto;
        }
        #div2 {
            background: rgba(255, 255, 255, 0.70);
            width: 100%;
            height: auto;
            margin-top: 20px;
        }
        .text {
            text-align: center;
            cursor: default;
        }
        .content {
            background: #e74c3c;
            height: 50px;
        }
        #div2_content {
            display: none;
        }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div1_text" class="text">
                blah
            </div>
            <div id="div1_content" class="content">
            </div>
        </div>
        <div id="div2">
            <div id="div2_text" class="text">
                blah blah
            </div>
            <div id="div2_content" class="content">
            </div>
        </div>
    </body>
</html>

Answer 1

只需删除这样的else语句：

        $(document).ready(function() {
            $("#div1_text").click(function() {
                if ($(this).next().is(":hidden")) {
                    $(this).next().slideDown(300);
                    $("#div2_text").next().slideUp(300);
                }
            });
            $("#div2_text").click(function() {
                if ($(this).next().is(":hidden")) {
                    $(this).next().slideDown(300);
                    $("#div1_text").next().slideUp(300);
                }
            });
        });

以下是演示：http://jsfiddle.net/4G8NM/

当内容可见时，jquery停止动画

1 个答案: