使用jQuery更改响应站点中超文本标记语言的结构
使用jQuery更改响应站点中超文本标记语言的结构
提问于 2012-07-16 22:27:01
我在这里遇到了一点麻烦，一个设计师坚持某个设计已经完成，并说“哦，好吧，如果它不能完成……”在那些我们都知道的开发人员的语气中，他们说这是可以做到的，但你做不到。
我认为这是不可能的，但我在这里读了一篇关于使用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()将ddWrapper“ddWrapper”移动到基于当前布局的id=中的不同位置？这个问题超出了我目前对jQuery的了解，所以我请求任何人都能提供的帮助。
干杯
弗兰克
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-07-16 22:40:04
实现这一点的最简单方法可能是多次包含一些内容，然后只显示:无；您不想要的内容。即
<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的情况下控制。
希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11506430
复制相关文章
相似问题
腾讯云开发者
