Question

我写了一个页面，如图所示.... Click here!
我使用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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

在查看你的代码之后，似乎你的jquery代码工作正常，使div显示/隐藏你想要的。

但是这不可能被看到，因为这发生在浏览器的最底层，并且因为浏览器的垂直滚动条没有显示出来。你不能滚动，所以你不能看到它工作。（因为我通过删除一些DOM元素来检查Firefox，以便在浏览器的可见视口区域中显示隐藏的div。）

修改您可以通过在{c}中将overflow: auto;添加到body来验证这一点。当你看到滚动条时，还有目标div。

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

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

当点击另一个div时，Div不会隐藏和显示

2 个答案: