إخفاء مسج الأكورديون أثناء تحميل

Question

وأنا اختبار موقع بناء مع اتصال بطيء ولقد لاحظت مسج الأكورديون يبقى موسعة لفترة طويلة، حتى يتم تحميل ما تبقى من الموقع، ومن ثم ينهار في نهاية المطاف. ليست جميلة جدا. وكنت أتساءل كيف يمكن أن يبقيه انهار خلال عملية التحميل وتوسيع فقط عند النقر عليها.

وأنا أعمل مع مستقل 1.6 نسخة من البرنامج المساعد الأكورديون.

والهيكل الأساسي:

<div class="sidebar">
    <ul id="navigation" class="ui-accordion-container">
        <li><a class="head" href="#">1</a>
            <ul class="sub">
                <li><a href="#">1a</a></li>
                <li><a href="#">2a</a></li>
            </ul> 
         </li>
    </ul>
</div>

ووالنصي

jQuery().ready(function(){
    jQuery('#navigation').accordion({ 
        active: 'false', 
        header: '.head', 
        navigation: true,
        animated: 'easeslide',
        collapsible: true
    });     
});

وحاولت إخفاء العناصر في CSS لمنعهم من الظهور أثناء تحميل ولكن كل ذلك يتحقق في وجود لهم مخبأة دائما.

وربما كانت المشكلة هي في CSS لدي صورة خلفية في كل من القوائم الفرعية:

#navigation{
    margin:0px;
    margin-left: 10px;
    padding:0px;
    text-indent:0px;
    font-size: 1.1em;
    width:200px;
    text-transform: uppercase;
    padding-bottom: 30px;
} 
#navigation ul{
    border-width:0px;
    margin:0px;
    padding:0px;
    text-indent:0px;
}
#navigation li{
    list-style:none outside none;
}
#navigation li ul{
    height:185px; overflow:auto;
}
#navigation li ul.sub{
    background:url('../images/sub.jpg') no-repeat;
    dispaly: block;
}
#navigation li li a{
    color:#000000;
    display:block;
    text-indent:20px;
    text-decoration: none;
    padding: 6px 0;
}
#navigation li li a:hover{
    background-color:#FFFF99;
    color:#FF0000;
}

وشكرا مقدما على أي مشورة بشأن كيفية الحصول على هذا الشيء تشغيل أكثر سلاسة قليلا، وبعد أن انهارت الأكورديون دائما.

و-edit - لقد نسيت أن أذكر أنني آمل أيضا عن حل من شأنها أن تسمح ليكون الملاحة تزال متاحة للذين لا يملكون جافا سكريبت.

Answer 1

وأفعل هذا أول شيء بكل ما أوتيت من المواقع: الحق بعد علامة الجسم، ووضع علامة النصي مع هذه جافا سكريبت:

jQuery('body').addClass('js');

وهذا يتيح لك ربط أسلوب لأية عناصر من شأنها أن تبدو مختلفة في بعض الطريق عند تفعيل الجافا سكريبت، ويحدث ذلك على الفور.

وهناك حلول جيدة لبقية مشاكلك في إجابات أخرى. سوف تحتاج فقط اثنين من الأساليب "القاعدة" بدلا من واحدة:

#navigation ul li { /*open styles for no javascript*/ }
body.js #navigation ul li { /*closed styles for pre dom.ready*/ }

... ومن ثم إعادة فتح قبل تطبيق الأكورديون على dom.ready.

وتحرير: إذا كنت تحميل مسج في نهاية الصفحة (أو لا تستخدم مسج)، يمكنك استخدام هذا الإصدار جافا سكريبت على التوالي:

<script type="text/javascript">
    var b = document.getElementsByTagName('body')[0];
    b.className+=b.className?' js':'js';
</script>

Answer 2

وأنا واجهت هذه المشكلة بالذات قبل أسبوع. أنا وضعت الحاوية لعرض: لا شيء ثم تستخدم مسج لجعلها تظهر في الوقت المناسب:

$(".accordion").show();
$(".accordion").accordion();

Answer 3

ورمز داخل jQuery.ready () لا يعمل حتى DOM جاهز - لذلك فمن الطبيعي أن العناصر التي في نهاية المطاف سوف تكون مخفية على البقاء مرئية لفترة من الوقت. يتم تعيين الأكورديون على هذا النحو جزئيا لسهولة الاستخدام وجزئيا من أجل degredation رشيقة: سوف محتوى لا يكون في عداد المفقودين (الخفية) إذا تم تعطيل جافا سكريبت

إذا كنت على استعداد للمخاطرة صفحة أن يكسر بدون جافا سكريبت، والمضي قدما ووضع عناصر لتكون مخفية. ثم، مباشرة قبل .accordion ()، وتظهر () لهم.

---

وهنا فكرة للحفاظ على التوافق. وقد تم اختبار الحد الأدنى، هو و هي مفتوحة للتعليق.

وترك CSS الخاص وحده، ولكن هذا إضافة إلى الجزء العلوي من جافا سكريبت (<م> خارج jQuery.ready()):

document.styleSheets[0].addRule(".yourclass", "display:none");

وبهذه الطريقة، وكانت الصفحة التي يجري بناؤها، سيتم تعيين قاعدة CSS لإخفاء العناصر المخفية. ثم، داخل jQuery.ready()، اتصل $(".yourclass").show() لاعادتهم قبل تهيئة الأكورديون.

Answer 4

هل .accordion الخاص ملزم مباشرة في