Question

我有一个作业需要在这里进行桌面视图： desktop view of banners

并使之响应其移动视图：

最初解决此问题时，我使用了引导程序来完成分配，但是现在我的任务是不使用它。

我尝试了许多方法来使其正常工作，但似乎没有任何粘滞现象。我最初尝试了replaceWith（）并使用了模板文字。我实际上设法正确地获得了设计，但是当弄乱窗口大小时，桌面将被破坏，我无法弄清楚如何正确地添加逻辑以获取原始的桌面视图。

我最近一次尝试，从这里得到了帮助，因为我希望代码看起来更简洁。这是我当前的迭代：

SELECT * FROM entries WHERE id IN (SELECT id FROM #temp)

此问题的原因在于它似乎也无法恢复到以前的状态。伴随着这个问题，我创建了一个元素，该元素在每次更改小于480的窗口宽度时都会初始化。我也无法弄清楚这种行为。不过，现在，我真的很想弄清楚最初的问题以及为什么它没有响应。

这是html：

function checkSize() {
        if ($(window).width() < 480) {


            $(".main-container").each(function() {
                $(this).find(".head-banner #header").detach();
                $(this).find(".head-banner .discount").detach();
                //  console.log($(this).find(".body-banner img"));
                $(this).find(".body-banner img").detach().appendTo($(this).find(".head-banner"));
                $(this).find(".body-banner .supply").detach().appendTo($(this).find(".head-banner"));
                $(this).find(".head-banner .best").detach().appendTo($(this).find(".head-banner"));
                //  $(this).find('.head-banner').append(`<i class='fas fa-angle-right'>`)

            });

            $(".main-container").each(function() {
                $(this).find(".head-banner #header").appendTo(".head-banner ");
                $(this).find(".head-banner .discount").prependTo(".head-banner ");
                $(this).find(".head-banner img").appendTo($(this).find(".body-banner .wrapper"));
                $(this).find(".head-banner .supply").prepent($(this).find(".body-banner"));
                $(this).find(".head-banner .best").appendTo($(this).find(".head-banner"));
                //$(this).find('.head-banner').append(`<i class='fas fa-angle-right'>`)
            })

        }
    }
    $(window).resize(checkSize);

是否也可以通过一些CSS来解决？

Answer 1

以下示例代码将为您提供帮助：

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  width: 30%;
}

input {
  visibility: hidden;
  position: absolute;
}
h1,
h1 label {
  cursor: initial;
}

@media (max-width:767px) {
  li {
    width: 100%;
  }
  input {
    display: block;
  }
  p {
    display: none;
  }
  input:checked~p {
    display: block;
  }
  h1,
  h1 label {
    cursor:pointer;
    width: 100%;
    display: block;
  }
}

<ul class="list">
  <li>
    <input type="checkbox" id="Heading 1">
    <h1><label for="Heading 1">Heading 1</label></h1>
    <p>Summary goes here...</p>
  </li>
  <li>
    <input type="checkbox" checked id="Heading 2">
    <h1><label for="Heading 2">Heading 2</label></h1>
    <p>Summary goes here...</p>
  </li>
  <li>
    <input type="checkbox" id="Heading 3">
    <h1><label for="Heading 3">Heading 3</label></h1>
    <p>Summary goes here...</p>
  </li>
</ul>

移动多个元素并将它们放回原处

1 个答案: