Question

我在这里做了一些修复，一位设计师坚持认为某项设计已经完成并在那些我们都知道开发人员称之为“可能无法完成......”的声明中说明它可以是完了但是你不能这样做。

我认为这是不可能的，但是这里有关于使用jQuery .append的阅读，所以它可能毕竟是。任何建议都会非常感谢你。

这是我的代码：

<section id="technologies">
   <ul>
       <li class="technology" id="ddTechnology1">
    <div class="technologyTitle">Title1</div>
   </li>
   <li class="technology" id="ddTechnology2">
    <div class="technologyTitle">Title2</div>
   </li>
   <li class="technology" id="ddTechnology3">
    <div class="technologyTitle">Title3</div>
   </li>
   <li class="technology" id="ddTechnology4">
    <div class="technologyTitle">Title4</div>
   </li>
   </ul>
</section>
<div id="ddWrapper">
    <div id="ddContent" class="targetDiv">
         Content Content
    </div>
</div>

ul是4个漂浮的左白框，每个框中都有一个图像。下面的div只是一段内容与。

相同

该网站是一个响应式网站，因此当它缩小为平板电脑视图时，四个左侧浮动的li变成两行两个，并且在智能手机视图中一个堆叠在另一个上面。

在每个视图中，该部分下方的div仅调整大小以适应内容并重新排列内容。

设计师并不高兴，因为他的设计在960px视图中说，div id =“ddWrapper”低于四个左对齐的框;在平板电脑600px视图中，div必须位于两行之间，而在智能手机320px视图中，它必须位于第一个li之下。

对我而言，这不是一个响应式布局，但我一直在尝试使用jQuery将兔子拉出帽子，让设计师感到高兴。

有没有办法使用jQuery的append（）根据当前布局将div id =“ddWrapper”移动到HTML中的不同位置？这个问题超出了我目前对jQuery的了解，所以我要求任何人都能提供任何帮助。

欢呼声

frank

Answer 1

实现这一目标的最简单方法可能是不止一次包含一些内容而只显示：none;你不想要的内容。即。

<section class="desktop-technologies">
   <ul>
       <li class="technology" id="ddTechnology1">
    <div class="technologyTitle">Title1</div>
   </li>
   <li class="technology" id="ddTechnology2">
    <div class="technologyTitle">Title2</div>
   </li>
   <li class="technology" id="ddTechnology3">
    <div class="technologyTitle">Title3</div>
   </li>
   <li class="technology" id="ddTechnology4">
    <div class="technologyTitle">Title4</div>
   </li>
   </ul>
</section>


<section class="tablet-technologies">
  <ul>
       <li class="technology" id="ddTechnology1">
    <div class="technologyTitle">Title1</div>
   </li>
   <li class="technology" id="ddTechnology2">
    <div class="technologyTitle">Title2</div>
   </li>
 </ul>
</section>


<section class="mobile-technologies">
  <ul>
       <li class="technology" id="ddTechnology1">
    <div class="technologyTitle">Title1</div>
   </li>
 </ul>
</section>


<div id="ddWrapper">
    <div id="ddContent" class="targetDiv">
         Content Content
    </div>
</div>


<section class="tablet-technologies">
  <ul>
   <li class="technology" id="ddTechnology3">
    <div class="technologyTitle">Title3</div>
   </li>
   <li class="technology" id="ddTechnology4">
    <div class="technologyTitle">Title4</div>
   </li>
   </ul>
</section>


<section class="mobile-technologies">
  <ul>
   <li class="technology" id="ddTechnology2">
    <div class="technologyTitle">Title2</div>
   </li>
   <li class="technology" id="ddTechnology3">
    <div class="technologyTitle">Title3</div>
   </li>
   <li class="technology" id="ddTechnology4">
    <div class="technologyTitle">Title4</div>
   </li>
   </ul>
</section>

然后你可以申请：

.tablet-technologies, .mobile-technologies {
    display:none;
}

显示适当样式的相应部分。

这不是最干净的解决方案，但它不会增加文件大小的开销，并且可以在没有javascript的情况下进行控制。

希望有所帮助！

使用jQuery更改响应式站点中的HTML结构

1 个答案: