首页 > 解决方案 > 为什么隐藏包含 div 意味着孩子不会在 jquery 中显示

问题描述

以下代码有效,但我想替换行 $("#homepage").hide(); 与 $("#page").hide(); 所以我可以处理多个页面。问题是该页面将隐藏页面 div,但不会再次显示主页 div,但如果不涉及父 div,它将正确显示和隐藏 div。

<html>
  <body>
    <div id="page">
      <div id="homepage">
        <h1>home</h1>
      </div>
      <div id="advert">
        <h1>advert</h1>
      </div>
    </div>
    <script>
      var app = $.sammy(function() {
        this.get('#/', function() {
          $("#ad").hide();
          $("#homepage").show();
        });
        this.get('#ad/', function() {
          $("#homepage").hide();
          $("#ad").show();
        });
      });
      app.run();
    </script>
  </body>
</html>

我修改代码如下以演示我的预期用途:

      var app = $.sammy(function() {
        this.get('#/', function() {
          $("#page").hide();
          $("#homepage").show();
        });
        this.get('#ad/', function() {
          $("#page").hide();
          $("#ad").show();
        });
      });
      app.run();

此代码生成一个空白窗口,不显示主页或广告页面。我尝试过使用多个不同的路由库。

标签: javascriptjqueryhtmlcsssammy.js

解决方案


如果你隐藏了父母,孩子也会被隐藏,因为它们是相互连接的。如您所见,标签的层次结构设计。所以如果你想展示

<div id="homepage"></div>

并隐藏

<div id="page"></div>

您应该将#homepage 置于#page 范围之外。这是正确的规则。

我希望它对你有所帮助。


推荐阅读