为什么隐藏包含div意味着子代不会在jquery中显示

Question

The following code works but i would like to replace the lines $("#homepage").hide(); 以下代码有效，但我想替换$（“＃homepage”）。hide（）;行； with $("#page").hide(); 与$（“＃page”）。hide（）; so i can take care of multiple pages. 这样我就可以处理多个页面。 the problem is that the page will hide the page div but not show the homepage div again but it will show and hide the divs correctly if there are no parent divs involved. 问题是该页面将隐藏页面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>

i modify the code as follows to demonstrate my intended usage: 我将代码修改如下，以演示我的预期用法：

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

this code produces a window that is blank and does not show the homepage or ad page. 此代码产生一个空白窗口，不显示主页或广告页面。 i have tried with multiple different routing libraries. 我尝试了多种不同的路由库。

Answer 1

If you hide the parent , also the child will be hide coz their are connected to each other. 如果隐藏父级，则子级也将被隐藏，因为它们相互连接。 as you can see the hierarchy design of the tag. 如您所见，标签的层次结构设计。 So if you want to show the 因此，如果您想显示

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

and hide the 并隐藏

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

you should take the #homepage outside the scope of #page. 您应该将#homepage置于#page范围之外。 That's the proper rule. 那是正确的规则。

I hope it helped you. 希望对您有所帮助。

Answer 2

I didn't used sammy.js library. 我没有使用sammy.js库。 I found simple sample example. 我找到了简单的示例示例。 check below link. 检查下面的链接。 https://jsfiddle.net/KZknm/34/

$.sammy(function(){
        // bind to #:page where :page can be some value
        // we're expecting and can be retrieved with this.params
        this.get('#:page',function(){
            // Demo just finds the div within #pages and loads it
            // within the #container
            $('#container').empty().append(
                $('#pages #'+this.params['page']+'_html').clone()
            );
        });
    }).run();

here is Html 这是HTML

<!-- very simple container that may be changed with clicks -->
<div id="container">
    <h1>Default Page</h1>
    <p>This is the default page</p>
</div>

<!-- Dummy navigation list using hash links -->
<ul>
    <li><a href="#foo">Load "foo.html"</a></li>
    <li><a href="#bar">Load "bar.html"</a></li>
</ul>

<!-- fake ajax content--for the purposes of this demo, we just load
     content from another source (in this case named divs) -->
<div id="pages" style="display:none">
    <div id="foo_html">
        <h1>Foo page</h1>
        <p>This is the foo page.</p>
    </div>
    <div id="bar_html">
        <h1>Bar page</h1>
        <p>This is the bar page</p>
    </div>
</div>

为什么隐藏包含div意味着子代不会在jquery中显示

问题描述

2 个解决方案

解决方案1
1 2018-11-13 07:10:58

解决方案2
-1 2018-11-13 06:36:42

为什么隐藏包含div意味着子代不会在jquery中显示

问题描述

2 个解决方案

解决方案1 1 2018-11-13 07:10:58

解决方案2 -1 2018-11-13 06:36:42

解决方案1
1 2018-11-13 07:10:58

解决方案2
-1 2018-11-13 06:36:42