如何从每个具有4个子元素的4个网格元素创建横幅？

huangapple
go评论108阅读模式
英文:

How to create banner from 4 grid elements each has 4 child elements

问题

你好！根据你提供的代码和描述，你想要实现的功能是点击元素时展开并显示其子元素。以下是你提供的代码的翻译：

  1. function toggleAdditionalGrid(clickedElement) {
  2.   var section = clickedElement.closest('.shopify-section');
  3.   var additionalGrid = section.querySelector('.dt-sc-additional-grids');
  4.   if(window.innerWidth < 1020){
  5.     if(additionalGrid.style.display == 'none'){
  6.       additionalGrid.style.cssText = 'display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column; align-content: center;';
  7.     } else {
  8.       console.log(window.innerWidth);
  9.       additionalGrid.style.cssText = 'display: none; grid-template-columns: repeat(4, 25%) !important; margin: auto; width: 100% !important; justify-content: center !important; @media (max-width: 1020px) {display: none; flex-wrap: wrap; justify-content: center; flex-direction: column; align-content: center;}';
  10.     }
  11.   } else {
  12.     if(additionalGrid.style.display == 'none'){
  13.       additionalGrid.style.cssText = 'display: inline-grid; grid-template-columns: repeat(4, 25%) !important; margin: auto; width: 100% !important; justify-content: center !important;';
  14.     } else {
  15.       console.log(window.innerWidth);
  16.       additionalGrid.style.cssText = 'display: none; grid-template-columns: repeat(4, 25%) !important; margin: auto; width: 100% !important; justify-content: center !important; @media (max-width: 1020px) {display: grid; grid-template-columns: repeat(1, 100%); justify-content: center; flex-direction: column; align-content: center;}';
  17.     }
  18.   }
  19. };

希望这可以帮助到你！如果你还有其他问题，请随时提问。

英文:

may you help me how to recreate my idea from image.

如何从每个具有4个子元素的4个网格元素创建横幅？

如何从每个具有4个子元素的4个网格元素创建横幅？

I don't understand the prince of selecting and placing others elements and after unselecting to put back...

I tried to use grid but it doesn't work well...

First of all this is my code that shows me the child elements

  1.   function toggleAdditionalGrid(clickedElement) {
  2.   var section = clickedElement.closest(&#39;.shopify-section&#39;);
  3.   var additionalGrid = section.querySelector(&#39;.dt-sc-additional-grids&#39;);
  4.   if(window.innerWidth&lt;1020){
  5.               if(additionalGrid.style.display==&#39;none&#39; ){
  6.                   additionalGrid.style.cssText=&#39;display: flex; flex-wrap: wrap;justify-content: center;flex-direction: column;align-content: center;&#39;;
  7.                 }
  8.               else {
  9.                 console.log(window.innerWidth);
  10.                additionalGrid.style.cssText=&#39;display: none; grid-template-columns: repeat(4, 25%) !important; margin: auto; width: 100% !important;justify-content: center !important; @media (max-width: 1020px) {display: none; flex-wrap: wrap;justify-content: center;flex-direction: column;align-content: center;}&#39;;
  11.               }
  12.   }
  13.  else{
  14.               if(additionalGrid.style.display==&#39;none&#39; ){
  15.                 additionalGrid.style.cssText=&#39;display: inline-grid; grid-template-columns: repeat(4, 25%) !important; margin: auto; width: 100% !important;justify-content: center !important;&#39;;
  16.               }
  17.             else{
  18.                 console.log(window.innerWidth);
  19.              additionalGrid.style.cssText=&#39;display: none; grid-template-columns: repeat(4, 25%) !important; margin: auto; width: 100% !important;justify-content: center !important; @media (max-width: 1020px) {display: grid;grid-template-columns: repeat(1, 100%) ;justify-content: center;flex-direction: column;align-content: center;}&#39;;
  20.             }
  21.     }
  22. };

So i just need a code that will expand clicked element and show child elements.

答案1

得分: 2

你可以使用Flexbox布局来构建一个“网格”，而不是使用display: grid。

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-css -->
  4. *, *::before, *::after {
  5.   box-sizing: border-box;
  6. }
  8. * {
  9.   font-family: Arial;
  10. }
  12. html, body {
  13.   width: 100%;
  14.   height: 100%;
  15.   margin: 0;
  16.   padding: 0;
  17. }
  19. .grid {
  20.   display: flex;
  21.   flex-direction: column;
  22.   flex: 1;
  23.   padding: 1rem;
  24.   gap: 1rem;
  25.   height: 100%;
  26. }
  28. .row {
  29.   display: flex;
  30.   flex-direction: row;
  31.   flex: 1;
  32.   gap: 1rem;
  33. }
  35. .col {
  36.   display: flex;
  37.   flex-direction: column;
  38.   align-items: center;
  39.   justify-content: center;
  40.   flex: 1;
  41. }
  43. .flex-2 {
  44.   flex: 2;
  45. }
  47. .bg-red    { background: #FF2222; color: #FFF; }
  48. .bg-orange { background: #FF6422; color: #FFF; }
  49. .bg-brown  { background: #441212; color: #FFF; }
  51. .fs-1 { font-size: 1rem; }
  52. .fs-2 { font-size: 2rem; }
  53. .fs-3 { font-size: 3rem; }
  55. <!-- language: lang-html -->
  56. <div class="grid">
  57.   <div class="row flex-2 bg-red fs-3">
  58.     <div class="col">Selected</div>
  59.   </div>
  60.   <div class="row">
  61.     <div class="col bg-orange fs-1">Child</div>
  62.     <div class="col bg-orange fs-1">Child</div>
  63.     <div class="col bg-orange fs-1">Child</div>
  64.     <div class="col bg-orange fs-1">Child</div>
  65.   </div>
  66.   <div class="row">
  67.     <div class="col bg-brown"></div>
  68.     <div class="col bg-brown"></div>
  69.     <div class="col bg-brown"></div>
  70.   </div>
  71. </div>
  73. <!-- end snippet -->

以上是使用Flexbox布局构建网格的示例代码。

英文:

You could use Flexbox layout to construct a "grid", rather than using display: grid.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. *, *::before, *::after {
  2. box-sizing: border-box;
  3. }
  4. * {
  5. font-family: Arial;
  6. }
  7. html, body {
  8. width: 100%;
  9. height: 100%;
  10. margin: 0;
  11. padding: 0;
  12. }
  13. .grid {
  14. display: flex;
  15. flex-direction: column;
  16. flex: 1;
  17. padding: 1rem;
  18. gap: 1rem;
  19. height: 100%;
  20. }
  21. .row {
  22. display: flex;
  23. flex-direction: row;
  24. flex: 1;
  25. gap: 1rem;
  26. }
  27. .col {
  28. display: flex;
  29. flex-direction: column;
  30. align-items: center;
  31. justify-content: center;
  32. flex: 1;
  33. }
  34. .flex-2 {
  35. flex: 2;
  36. }
  37. .bg-red    { background: #FF2222; color: #FFF; }
  38. .bg-orange { background: #FF6422; color: #FFF; }
  39. .bg-brown  { background: #441212; color: #FFF; }
  40. .fs-1 { font-size: 1rem; }
  41. .fs-2 { font-size: 2rem; }
  42. .fs-3 { font-size: 3rem; }

<!-- language: lang-html -->

  1. &lt;div class=&quot;grid&quot;&gt;
  2. &lt;div class=&quot;row flex-2 bg-red fs-3&quot;&gt;
  3. &lt;div class=&quot;col&quot;&gt;Selected&lt;/div&gt;
  4. &lt;/div&gt;
  5. &lt;div class=&quot;row&quot;&gt;
  6. &lt;div class=&quot;col bg-orange fs-1&quot;&gt;Child&lt;/div&gt;
  7. &lt;div class=&quot;col bg-orange fs-1&quot;&gt;Child&lt;/div&gt;
  8. &lt;div class=&quot;col bg-orange fs-1&quot;&gt;Child&lt;/div&gt;
  9. &lt;div class=&quot;col bg-orange fs-1&quot;&gt;Child&lt;/div&gt;
  10. &lt;/div&gt;
  11. &lt;div class=&quot;row&quot;&gt;
  12. &lt;div class=&quot;col bg-brown&quot;&gt;&lt;/div&gt;
  13. &lt;div class=&quot;col bg-brown&quot;&gt;&lt;/div&gt;
  14. &lt;div class=&quot;col bg-brown&quot;&gt;&lt;/div&gt;
  15. &lt;/div&gt;
  16. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月8日 20:53:12
  • 转载请务必保留本文链接：https://go.coder-hub.com/76859760.html
  • css
  • grid
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定