javascript - jQuery .html之后的DIV动画

我有DIV的UL。单击DIV时，页面应动画化幻灯片打开，显示有关单击主题的信息。这很好。我现在添加了下面的代码，以添加第2页，该页面将用新主题覆盖上面的div。在页面加载时，您可以单击div以查看信息。但是在选择下一页后，单击div时。没发生什么事。为了测试，我只重新排列了div。所以我知道ID名称是相同的。我在这方面还很陌生，但我觉得可能有一种更简单的方法可以做到这一点。我也想知道是否在代码中动画上下div。更改后，现在是upperhidden吗？任何帮助，将不胜感激。我觉得我在解释该做的事情上做得很糟糕。但我可以提供所需的一切。

更新:
谢谢。我会再试一次。我有一个网站。有2行，每行3行。这些是图像，例如:

密码HMS |冥王星
柠檬Java |电子邮件
按键1

说您单击密码，页面将打开，例如顶部行下方显示动画，底部行下方显示动画，并且它们之间的信息打开

密码HMS |冥王星
密码重置信息
柠檬Java |电子邮件
按键1

这方面都正常工作。我添加了将替换顶部和底部行的代码。为了进行测试，我将底部放到顶部，反之亦然。单击button1时，屏幕更改如下。

柠檬Java |电子邮件
密码| HMS |冥王星
button2

一旦在此布局中说出您单击密码，它将打开以显示此密码

柠檬Java |电子邮件
PW重置信息
密码HMS |冥王星
button2

但是此操作不起作用。一旦您在选择中从jquery code $('#upper').html(jQuery("#upperhidden").html());更改了项目后，div便不会打开以显示信息。注意按钮2将div设置为页面加载时的div。即使回到主菜单，它们也不会打开/升高/降低。

也许这可以更好地解释这个问题。

Java脚本

jQuery(document).ready(function() {
  var divClone = $("#upper").clone();
  var divClone1 = $("#lower").clone();
  $("#button1").hide();
  $("#button1").click(function(event) {
    $("#car").show();
    $("#button1").hide()
    $("#upper").replaceWith(divClone.clone());
    $("#lower").replaceWith(divClone1.clone());
  });
});


jQuery(document).ready(function() {
  $("#car").click(function() {
    $('#upper').html(jQuery("#upperhidden").html());
    $('#lower').html(jQuery("#lowerhidden").html());
    $("#car").hide();
    $("#button1").show();
  });
});


 $(function()
  {
  var closed = true;
  $('.password').click(function()
                       {
    if (closed = true)
    {
      $("#upper").animate({'top' : '-200px'}, {duration: 400});
      closed = false;

      $("#maininfo").animate({'top' : '200px'}, {duration: 000});
      closed = false;

      $("#lower").animate({'top' : '400px'}, {duration: 400});
      closed = false;

      $("#filler").animate({'top' : '400px'}, {duration: 400});
      closed = false;

      var output = document.getElementById("maininfo");
      var sentence = '<h4>PASSWORD RESET</h4>';

      var open = true;
      output.innerHTML = sentence;
    }
    else
    {

    }
  });
});

function callShell(){
  var objShell = new ActiveXObject("WScript.shell");
  objShell.run('rundll32.exe user32.dll,LockWorkStation');
}

CSS


#upper, #lower {
  background: #849794;
  height: 300px;
  position: relative;
  z-index: 10;
}

#upper {
  /* For IE */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000')";
  /* For IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000');
}

#upper ul {
  height: 100%;
  padding-top: 35px;
}

#upper ul li {
  display: inline-block;
  height: 230px;
  width: 230px;
  margin: 0 auto;
  margin-left: 30px;
}

#lower {
  background: #849794;
  height: 300px;
  overflow: hidden;
  /* For IE */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#000000')";
  /* For IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#000000');
}

#lower ul {
  height: 100%;
  padding-top: 35px;
}

#lower ul li {
  display: inline-block;
  height: 230px;
  width: 230px;
  margin: 0 auto;
  margin-left: 30px;
}

#filler {
  width: 100%;
  background: #849794;
  height: 400px;
  position: relative;
}


.password {
  background: url(../images/pr1.png);
  background-size: 100%;
}

.password:hover {
  background: url(../images/pr2.png);
  background-size: 100%;
}

.password:active {
  background: url(../images/pr3.png);
  background-size: 100%;
}

<div id="main">
    <div id="upper">
        <ul id="upper1">
            <!-- TOP BUTTONS -->
            <li class="password"></li>
            <li class="enable"></li>
            <li class="abstract"></li>
            <!-- TOP BUTTONS -->
        </ul>
    </div>
    <div id="upperhidden" style="display:none">
        <ul>
            <!-- TOP BUTTONS PAGE 2 -->
            <li class="abstract"></li>
            <li class="citrix"></li>
            <li class="password"></li>
            <!-- TOP BUTTONS PAGE 2 -->
        </ul>
    </div>
    <div id="maininfo">
    </div>
    <div id="lower">
        <ul id="lower1">
            <!-- BOTTOM BUTTONS -->
            <li class="threem"></li>
            <li class="citrix"></li>
            <li class="cerner"></li>
            <!-- BOTTOM BUTTONS -->
        </ul>
    </div>
    <div id="lowerhidden" style="display:none">
        <ul>
            <!-- BOTTOM BUTTONS PAGE 2 -->
            <li class="password"></li>
            <li class="enable"></li>
            <li class="abstract"></li>
            <!-- BOTTOM BUTTONS PAGE 2 -->
        </ul>
    </div>
    <div id="filler">
        <button id="car">Next Page</button>
        <button id="button1">Prev Page</button>
    </div>
</div>

最佳答案

我唯一看到的是在JS代码中

if (closed = true)

您缺少=

if (closed == true)

但是，是的，没有“DIV的UL”，还有一种更简便的方法