كيف تتجنب تبديل jquery () على تخطيط DIV من التسبب في تخطيطك للتحرك؟

Question

لدي وظيفة مسج تبديل واحدة من Divs في تخطيطي. المشكلة هي أن التصميم بأكمله يتحرك على الشاشة عندما يظهر DIV أو يختفي. هل هناك طريقة لتحقيق نفس تأثير الإظهار / إخفاء دون تغيير التخطيط؟

<script>
  $(document).ready(function(){
    $("button").click(function () {
      $("#layoutDiv").toggle();
    });
  });
</script>

Answer 1

يمكنك التفاف أن DIV في DIV آخر يحافظ على العرض السليم / الارتفاع للحفاظ على التصميم ثابتا.

<div style="width:300px;height:200px">
  <div class="animateMe">
    <p>When I close, the outer div will still be there.</p>
  </div>
</div>

إذا كنت لا تعرف الطول / العرض قبل اليد، فيمكنك تعيينه برمجيا مع جافا سكريبت عند تحميل الصفحة. مجرد الحصول على .width () و .height () قيم div القابلة للطي وتطبيقها على CSS من الدف الخارجي.

Answer 2

حاول كتابة وظيفة جديدة تستخدم الرؤية: مخفي بدلا من العرض: لا شيء. سيحافظ ذلك على مربع CSS (والتخطيط) دون إظهار DIV.

Answer 3

ستعمل إجابة Jonathan Sampson - بدلا من ذلك دون معرفة ما تفعله بالضبط (العلامة، والنتيجة المطلوبة)، أود استخدام تحديد المواقع المطلقة باستخدام فهرس Z عالية، مما سيعقله من تدفق المستندات. هذا هو ما استخدام ويندوز / إضاءة مشروط عموما. هنا الدورة التعليمية.