Почему скрытие элемента div означает, что ребенок не будет отображаться в jquery - PullRequest
Новая
       23

Почему скрытие элемента div означает, что ребенок не будет отображаться в jquery

0 голосов
/ 13 ноября 2018

Следующий код работает, но я хотел бы заменить строки $ ("# 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();

этот код создает пустое окно, в котором не отображается домашняя страница или страница объявления.я пробовал с несколькими различными библиотеками маршрутизации.

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

Если вы прячете родителя, ребенок также будет прятаться, потому что они связаны друг с другом.как вы можете видеть иерархию дизайна тега.Поэтому, если вы хотите показать 

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

и скрыть 

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

, вы должны вывести #homepage за пределы #page.Это правильное правило.

Надеюсь, оно вам помогло.

0 голосов
/ 13 ноября 2018

Я не использовал библиотеку sammy.js. Я нашел простой пример. проверьте ссылку ниже. 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();

вот 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>
...