单击另一个div时，div不会隐藏并显示

Question

我写了一个页面，如下所示。
点击这里！
我使用jQuery隐藏div并在单击另一个div时显示隐藏的div。 但这不起作用。 我该如何运作？
这是我的jQuery代码：

<script>

    $(document).ready(
        function() {
            $('#offerOne').attr('style', 'background-color: #F96433 !important');
            $("#offerDetailsOne").hide();
            $('#offerTwo').on("click", function() {
                $('#offerDetailsOne').toggle();
            });

        });
    </script>

Answer 1

 $(document).ready( function() { $('#offerOne').attr('style', 'background-color: #F96433 !important'); $("#offerTwo").hide(); $('#offerToggle').on("click", function() { $('#offerOne').toggle(); $('#offerTwo').toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <p id="offerOne">I Am Offer One</p> <p id="offerTwo">I Am Offer two</p> <p id="offerToggle">I am toggle!</p> 

Answer 2

查看完您的代码后，看来您的jquery代码工作正常，使div可以根据需要显示/隐藏。

但这是看不到的，因为这发生在浏览器底部的某个位置，并且没有显示浏览器的垂直滚动条。 您无法滚动，因此无法看到它正在工作。 （当我通过删除一些DOM元素检查firefox时，将隐藏的div置于浏览器的可见视口区域中）。

编辑您可以通过添加overflow: auto;来验证这一点overflow: auto; 以body在你的CSS。 当您可以看到滚动条以及目标div时。

---

因此，您需要从css中删除以下注释的代码，以查看此功能：

html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    /*overflow-y: hidden;*/
}