欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

切換垂直和水平格..和重新排列頂部div中的文本字段

CSS
林子帆1年前8瀏覽0評論

function toggleDivs() {
  var container = document.querySelector(".container");
  var top = document.querySelector(".top");
  var bottom = document.querySelector(".bottom");

  if (container.style.flexDirection === "column") {
    container.style.flexDirection = "row";
    top.style.flex = "3";
    bottom.style.flex = "7";
    top.style.height = "auto";
    bottom.style.height = "auto";
  } else {
    container.style.flexDirection = "column";
    top.style.flex = "3";
    bottom.style.flex = "7";
    top.style.height = "100%";
    bottom.style.height = "100%";
  }
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top {
  flex: 3;
  background-color: blue;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.bottom {
  flex: 7;
  background-color: green;
  border: 1px solid black;
}

input[type="checkbox"] {
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
  text-indent: -9999px;
  width: 50px;
  height: 25px;
  background-color: grey;
  display: block;
  border-radius: 100px;
  position: relative;
}

label:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 23px;
  height: 23px;
  background-color: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

input:checked + label:before {
  left: calc(100% - 1px);
  transform: translateX(-100%);
}

.toggle-button {
  margin-top: 10px;
  padding: 10px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.toggle-button:hover {
  background-color: #3e8e41;
}

input[type="text"] {
  margin-bottom: 10px; /* added this */
}

@media screen and (min-width: 768px) {
  .container {
    flex-direction: row;
  }

  input[type="text"] {
    margin-bottom: 0; /* added this */
  }
}

<input type="checkbox" id="toggle-switch" onclick="toggleDivs()" />
<label for="toggle-switch"></label>

<div class="container">
  <div class="top">
    <input type="text" placeholder="Text box 1" />
    <input type="text" placeholder="Text box 2" />
    <input type="text" placeholder="Text box 3" />
    <input type="text" placeholder="Text box 4" />
    <input type="text" placeholder="Text box 5" />
    <input type="text" placeholder="Text box 6" />
    <input type="text" placeholder="Text box 7" />
    <input type="text" placeholder="Text box 8" />
  </div>
  <div class="bottom"></div>
</div>

當頂部div處于水平布局時，可以修改toggleDivs()函數:-

function toggleDivs() {
      var container = document.querySelector(".container");
      var top = document.querySelector(".top");
      var bottom = document.querySelector(".bottom");
    
      if (container.style.flexDirection === "column") {
        container.style.flexDirection = "row";
        top.style.flex = "3";
        bottom.style.flex = "7";
        top.style.height = "auto";
        bottom.style.height = "auto";
        // Remove the textbox-row class to allow rearranging
        var textboxRows = document.querySelectorAll(".textbox-row");
        textboxRows.forEach((row) => {
          row.style.display = "flex";
        });
      } else {
        container.style.flexDirection = "column";
        top.style.flex = "3";
        bottom.style.flex = "7";
        top.style.height = "100%";
        bottom.style.height = "100%";
        // Add the textbox-row class to stack the textboxes vertically
        var textboxRows = document.querySelectorAll(".textbox-row");
        textboxRows.forEach((row) => {
          row.style.display = "block";
        });
      }
    }

.container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    
    .top {
      flex: 3;
      background-color: blue;
      border: 1px solid black;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }
    
    .bottom {
      flex: 7;
      background-color: green;
      border: 1px solid black;
    }
    
    .textbox-row {
      display: flex; /* Added this */
      flex-wrap: wrap; /* Added this */
    }
    
    .textbox-row input[type="text"] {
      margin: 5px; /* Adjusted this */
    }
    
    input[type="checkbox"] {
      height: 0;
      width: 0;
      visibility: hidden;
    }
    
    label {
      cursor: pointer;
      text-indent: -9999px;
      width: 50px;
      height: 25px;
      background-color: grey;
      display: block;
      border-radius: 100px;
      position: relative;
    }
    
    label:before {
      content: "";
      position: absolute;
      top: 1px;
      left: 1px;
      width: 23px;
      height: 23px;
      background-color: #fff;
      border-radius: 90px;
      transition: 0.3s;
    }
    
    input:checked + label:before {
      left: calc(100% - 1px);
      transform: translateX(-100%);
    }
    
    .toggle-button {
      margin-top: 10px;
      padding: 10px;
      background-color: #4caf50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    
    .toggle-button:hover {
      background-color: #3e8e41;
    }
    
    @media screen and (min-width: 768px) {
      .container {
        flex-direction: row;
      }
    
      .textbox-row {
        display: block; /* Adjusted this */
      }
    
      .textbox-row input[type="text"] {
        margin: 0 5px 0 0; /* Adjusted this */
      }
    
      input[type="text"] {
        margin-bottom: 0;
      }
    }

<input type="checkbox" id="toggle-switch" onclick="toggleDivs()" />
    <label for="toggle-switch"></label>
    
    <div class="container">
      <div class="top">
        <div class="textbox-row">
          <input type="text" placeholder="Text box 1" />
          <input type="text" placeholder="Text box 2" />
          <input type="text" placeholder="Text box 3" />
          <input type="text" placeholder="Text box 4" />
        </div>
        <div class="textbox-row">
          <input type="text" placeholder="Text box 5" />
          <input type="text" placeholder="Text box 6" />
          <input type="text" placeholder="Text box 7" />
          <input type="text" placeholder="Text box 8" />
        </div>
      </div>
      <div class="bottom"></div>
    </div>

我懷疑你試圖實現的應該是網格布局。

由于這些評論，我花了一個小時弄清楚如何修改JavaScript來添加一個類，而不是內聯樣式。使用媒體查詢來聲明初始的grid-template-columns值會使JS和CSS在使用if時變得更加復雜..否則如果..else語句，。排類和！重要的旗幟。

function toggleColumns() {
  const top = document.getElementById("top");
  console.log(top.outerHTML);

  if (top.classList.contains("rows")) {
    top.classList.toggle("rows");
    top.classList.toggle("columns");
   }
   
  else if (top.classList.contains("columns")) {
    top.classList.toggle("rows");
    top.classList.toggle("columns");
   }
   
  else {
    top.classList.toggle("columns");
  }

}

.container {
  height: 100vh;
  background-color: green;
}

.top {
  display: grid;
  align-items: center;
  justify-content: center;
  background-color: blue;
  border: 1px solid black;
  gap: 1em;
  padding: 1em;
}

.columns {
  grid-template-columns: repeat(4, 1fr) !important;
}

.rows {
  grid-template-columns: auto !important;
}

input[type="checkbox"] {
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
  text-indent: -9999px;
  width: 50px;
  height: 25px;
  background-color: grey;
  display: block;
  border-radius: 100px;
  position: relative;
}

label:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 23px;
  height: 23px;
  background-color: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

input:checked + label:before {
  left: calc(100% - 1px);
  transform: translateX(-100%);
}

.toggle-button {
  margin-top: 10px;
  padding: 10px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.toggle-button:hover {
  background-color: #3e8e41;
}

input[type="text"] {
  margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
  .top {
    grid-template-columns: repeat(4, 1fr);
  }

  input[type="text"] {
    margin-bottom: 0;
  }
}

<input type="checkbox" id="toggle-switch" onclick="toggleColumns()" />
<label for="toggle-switch"></label>

<div class="container">
  <div id="top" class="top">
    <input type="text" placeholder="Text box 1" />
    <input type="text" placeholder="Text box 2" />
    <input type="text" placeholder="Text box 3" />
    <input type="text" placeholder="Text box 4" />
    <input type="text" placeholder="Text box 5" />
    <input type="text" placeholder="Text box 6" />
    <input type="text" placeholder="Text box 7" />
    <input type="text" placeholder="Text box 8" />
  </div>
</div>


function toggleColumns() {
  const top = document.getElementById("top");
  console.log(top.outerHTML);

  if (top.classList.contains("rows") {
    top.classList.toggle("rows");
   } else {
    top.classList.toggle("columns");
  }
}