javascript - Jquery .html 后的 DIV 动画

Question

我有 DIV 的 UL。单击 DIV 时，页面应以动画方式打开幻灯片，显示有关所单击主题的信息。这很好用。我现在添加了代码(见下文)，以添加一个页面 2，该页面将用新主题覆盖上面的 div。在页面加载时，您可以单击 div 以查看信息。但是在选择下一页之后，当点击 div 时。什么都没发生。为了测试，我只重新排列了 div。所以我知道 ID 名称是相同的。我对此很陌生，但我觉得好像有更简单的方法可以做到这一点。我也想知道是否在代码中为上部和下部 div 设置动画。在它改变之后它会是 upperhidden 现在吗？任何帮助，将不胜感激。我觉得我在解释该做什么时做得很糟糕。但我可以提供任何需要的东西。

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

密码 |船舶管理系统 |冥王星
思杰 | Java |电子邮件
按钮1

假设您单击密码，页面打开如下所示，顶行动画向上，底行动画向下，信息在它们之间打开

密码 |船舶管理系统 |冥王星
pw 重置信息
思杰 | Java |电子邮件
按钮1

这方面一切正常。我添加了将替换顶部和底部行的代码。为了测试，我把它放在底部到顶部的地方，反之亦然。当 button1 被点击时，屏幕会像这样变化。

思杰 | java |电子邮件
密码 |船舶管理系统 |冥王星
按钮2

一旦在这个布局说你点击密码它应该打开显示这个

思杰 | Java |电子邮件
密码重置信息
密码 |船舶管理系统 |冥王星
按钮2

但是这个操作是行不通的。一旦元素从 jquery code $('#upper').html(jQuery("#upperhidden").html()); 当你做出选择时，div 不会打开显示信息。注意按钮 2 将 div 设置回页面加载时的状态。即使回到主线，它们也不会打开/升高/降低。

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

Javascript

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>

Answer 1

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

if (closed = true)

你错过了一个=

if (closed == true)

但是，是的，没有“DIV 的 UL”，有一种更简单的方法可以做到这一点