Question

我的折叠箱有问题。为了更好地理解，请查看以下小提琴：https://jsfiddle.net/rnvoh7ms/27/

    function expand(){
    var e1 = document.getElementById("e1");
      e1.style.width = "100%";
      e1.style.height = "600px";
      e1.style.marginLeft = "30px";
      e1.style.marginRight = "30px";
    }
    
    function fold(){
    var e1 = document.getElementById("e1");
      e1.style.width = "400px";
      e1.style.height = "400px";
      e1.style.marginLeft = "0px";
      e1.style.marginRight = "0px";
    }

    #wrapper {
      margin: auto;
      width: 90%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      flex-wrap: wrap;
    }
    
    .tile {
      float: left;
      width: 400px;
      height: 400px;
      margin: 60px 0 0 0;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 0 20px 0 rgba(0, 0, 0, 0.1);
      border-radius: 20px;
      -webkit-transition-duration: 0.5s;
      -webkit-transition-delay: 0s;
      -webkit-transition-timing-function: ease-in-out;
      transition-duration: 0.5s;
      transition-delay: 0s;
      transition-timing-function: ease-in-out;
    }

    <div id="wrapper">
    
    <!-- This box(1)... -->
    <div class="tile" id="e1">
    <p>folded<br><br></p>
    <p>this content is different to the LOWER box´s content</p>
          <img id="arrow-down" value="change width" onclick="expand()" src="https://imageog.flaticon.com/icons/png/512/25/25623.png?size=1200x630f&pad=10,10,10,10&ext=png&bg=FFFFFFFF" style="width:         40px; display: block; margin: auto; bottom: 0px;" />
    </div>
    
    
    <!-- ...should get transformed into this box -->
    <div class="tile" id="e1" style="background-color: lightblue; width: 90%; height: 600px; margin-bottom: 40px;">
    <p>unfolded</p>
    <p>this content is different to the UPPER box´s content</p>
          <img id="arrow-up "value="change width" onclick="fold()" src="https://imageog.flaticon.com/icons/png/512/25/25649.png?size=1200x630f&pad=10,10,10,10&ext=png&bg=FFFFFFFF" style="width: 40px; display: block; margin: auto; bottom: 0px;" />
    </div>
    
    <!-- Box (2)... -->
    <div class="tile" id="e1">
    <p>folded<br><br></p>
    <p>I am just another box and I want to behave like the first one</p>
          <img id="arrow-down" value="change width" onclick="expand()" src="https://imageog.flaticon.com/icons/png/512/25/25623.png?size=1200x630f&pad=10,10,10,10&ext=png&bg=FFFFFFFF" style="width:         40px; display: block; margin: auto; bottom: 0px;" />
    </div>
    </div>

我希望单击上方的“向下箭头”，使上方的框（1）的宽度和高度变大。然后，通过单击“向上箭头”，转换后的版本（下部方框）应以其旧形式（上部方框）转换回原样。另外，我想在两个box状态中显示完全不同的内容。

对此我感到困惑，尤其是当我在HTML中放入多个框时，JS仅适用于一个框。

我已将jQuery与此链接：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

您没有摆弄任何东西。您的问题可能在declare @MyTable Table (ID int, Name varchar(50),Coverage varchar(50), Premium money) insert into @MyTable values (1,'Robert', 'AutoBI', 100), (1,'Robert', NULL, 300), (2,'Neill','AutoBIPD',150), (2,'Neill','AutoBI',200), (3,'Kim', 'Collision',50), (3,'Kim',NULL,100), (4,'Rick','AutoBI',70), (5,'Lukasz','Comprehensive',50), (5,'Lukasz','NULL',25) select ID, Name, Coverage, sum(Premium) as Premium from @MyTable group by ID ,Name ,Premium ,Coverage中，所有框都一样。容器的id应该是唯一的。对于不同的框，您有相同的id。

如何在JS中折叠项目？

1 个答案: