Javascript jquery在内容可见时单击停止动画_Javascript_Jquery_Css_Html

Javascript jquery在内容可见时单击停止动画

javascript jquery css html

Javascript jquery在内容可见时单击停止动画,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我有两个包含单独内容的div。第一个div的内容在用户加载页面时显示，第二个div的内容隐藏。当用户单击第二个div时，第一个div的内容消失，第二个div的内容现在可见。但如果用户在任何一个div可见时单击该div，该div的内容就会消失。我不擅长javascript，我在网上找到了我正在使用的大部分代码，我想知道如何制作它，这样当div的内容可见时，它不会在点击它时消失 <!doctype html> <head> <meta chars

我有两个包含单独内容的div。第一个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>


测试
$（文档）.ready（函数（）{
$（“#div1_text”）。单击（函数（）{
如果（$（this）.next（）是（“：hidden”））{
$（this.next（）.slideDown（300）；
$（“#div2_text”）.next（）.slideUp（300）；
}否则{
$（this.next（）.hide（300）；
}
如果（$（this）.next（）是（“：visible”））{
}
});
$（“#div2_text”）。单击（函数（）{
如果（$（this）.next（）是（“：hidden”））{
$（this.next（）.slideDown（300）；
$（“#div1_text”）.next（）.slideUp（300）；
}否则{
$（this.next（）.hide（300）；
}
如果（$（this）.next（）是（“：visible”））{
}
});
});
html{
背景#34495e；
}
#第一组{
背景：rgba（255，255，255，0.70）；
宽度：100%；
高度：自动；
}
#第二组{
背景：rgba（255，255，255，0.70）；
宽度：100%；
高度：自动；
边缘顶部：20px；
}
.文本{
文本对齐：居中；
游标：默认值；
}
.内容{
背景：#e74c3c；
高度：50px；
}
#第2部分内容{
显示：无；
}
废话
废话

只需删除以下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);
                }
            });
        });

这里有一个演示：

您说第二个

被隐藏，当用户单击第二个div时，您说

。隐藏第二个
时，无需单击任何内容。