Javascript 展开一列/div，同时在其周围移动其他列_Javascript_Jquery_Html_Css_Dashboard

Javascript 展开一列/div，同时在其周围移动其他列

javascript jquery html css

Javascript 展开一列/div，同时在其周围移动其他列,javascript,jquery,html,css,dashboard,Javascript,Jquery,Html,Css,Dashboard,我正在创建一个示例仪表板UI，它有3列/div，每列中有3张卡或磁贴。单击后，我使用jQuery动画展开每张卡，当选定的卡展开时，同一列中的卡/磁贴确实向下移动。但是，其他列中的元素不会移动，卡片最终会彼此重叠。展开其中一张卡时，如何移动不同列中的其他卡？（目前，只有左上角的卡上附有动画）代码笔- HTML <html> <head> <title>3 column tiles</title> <script src="

我正在创建一个示例仪表板UI，它有3列/div，每列中有3张卡或磁贴。单击后，我使用jQuery动画展开每张卡，当选定的卡展开时，同一列中的卡/磁贴确实向下移动。但是，其他列中的元素不会移动，卡片最终会彼此重叠。展开其中一张卡时，如何移动不同列中的其他卡？（目前，只有左上角的卡上附有动画）

代码笔-

HTML

<html>
  <head>
    <title>3 column tiles</title>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  </head>
  <body>
  <div class = "container">
    <div class = "column-left"; overflow:auto>
      <div class = "card-blue expand" id = "blue-column-1"></div>
      <br>
      <div class = "card-green"></div>
      <br>
      <div class = "card-pink"></div>
    </div>

    <div class = "column-center">
      <div class = "card-blue"></div>
      <br>
      <div class = "card-green" id="green-column-2"></div>
      <br>
      <div class = "card-pink"></div>
    </div>

    <div class = "column-right">
      <div class = "card-blue"></div>
      <br>
      <div class = "card-green"></div>
      <br>
      <div class = "card-pink"></div>
    </div>
    </div>

JAVASCRIPT

$("#blue-column-1").click(function(){
  var blue = $("#blue-column-1");
  blue.animate({height:'500px', width:'500px'}, "slow");
});

要解决您的问题，您应该首先更改列div的宽度，而不是卡div。然后，一旦您获得该设置，将所有宽度设置为百分比，而不是px（这将确保它永远不会溢出）。然后，当您使用JS时，更改每一列的宽度。例：33%33%33%->49%25%25%。如果卡片div设置为百分比，那么一切都应该正常。

单击后，您希望其他列的宽度是多少？可能使用水平布局并为您单击的div设置显示块我有一些快速问题。1.单击后是否希望列的宽度相等（当前为33%）？2.您还想扩展同一列的其他卡片吗？@BryanHill-其他列的宽度应保持不变。单击一张卡时，它们的位置会受到影响，从而移动到扩展卡之外。@Patrice-列的宽度相同。只有一张被点击的卡片应该展开。如果你给我你想要的百分比，我会给你一个示例代码。也许你可以编辑你的答案，包括一些示例代码，而不是仅仅解释步骤？

$("#blue-column-1").click(function(){
  var blue = $("#blue-column-1");
  blue.animate({height:'500px', width:'500px'}, "slow");
});