1

デザイナーが特定のデザインが完了したと主張し、開発者として私たち全員が知っているトーンで「それができない場合は...」と言って、ここで少し修正されています。できません。

それは不可能だと思いましたが、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は、と同じコンテンツの一部です。

このサイトはレスポンシブサイトであるため、タブレットビューに縮小すると、左に浮かんだ4つのliが2列になり、スマートフォンビューでは積み重ねられます。

各ビューで、セクションの下のdivはサイズが収まるようにサイズ変更され、コンテンツが再配置されます。

デザイナーは、彼のデザインが960pxビューで、div id="ddWrapper"が4つの左揃えのボックスの下にあると言っているので満足していません。タブレット600pxビューでは、divは2つの行の間にある必要があり、スマートフォン320pxビューでは、最初のliの下にある必要があります。

私にとってこれはレスポンシブレイアウトではありませんが、jQueryを使用してウサギを帽子から引き出し、デザイナーを満足させようとしています。

jQueryのappend（）を使用して、現在のレイアウトに基づいてdiv id = "ddWrapper"をHTMLの別の場所に移動する方法はありますか？この質問は、jQueryに関する私の現在の知識を超えているので、誰でも提供できる助けを求めています。

乾杯

率直

4

1 に答える 1

3

おそらく、これを実現する最も簡単な方法は、コンテンツの一部を複数回含めて、単に表示することです: 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 なしで制御できます。

それが役立つことを願っています!

于 2012-07-16T14:40:03.570 に答える