로딩하는 동안 jQuery 아코디언을 숨 깁니다

StackOverflow https://stackoverflow.com/questions/703783

  •  22-08-2019
  •  | 
  •  

문제

연결이 느린 사이트 빌드를 테스트하고 있으며 jQuery Accordion이 오랫동안 확장되어 사이트의 나머지 부분이로드 된 다음 마지막으로 붕괴되는 것을 알았습니다. 별로 예쁘지 않습니다. 로딩 프로세스를 통해 어떻게 무너질 수 있는지 궁금해하고 클릭 할 때만 확장 할 수있었습니다.

아코디언 플러그인의 독립형 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- 자바 스크립트가없는 사람들이 NAV가 여전히 액세스 할 수있는 솔루션을 기대하고 있다고 언급하는 것을 잊었습니다.

도움이 되었습니까?

해결책

나는 내 모든 사이트 에서이 일을 먼저 수행합니다. 바디 태그 바로 뒤에이 JavaScript와 함께 스크립트 태그를 넣습니다.

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

이것은 JavaScript가 활성화 될 때 어떤 식 으로든 다르게 보일 요소에 대한 스타일 훅을 제공하며 즉시 발생합니다.

다른 답변에는 나머지 문제에 대한 좋은 해결책이 있습니다. 하나 대신 두 개의 "기본"스타일이 필요합니다.

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

... 그런 다음 Dom.ready에 아코디언을 적용하기 전에 다시 열었습니다.

편집 : 페이지 끝에서 jQuery를로드하는 경우 (또는 jQuery를 사용하지 않음)이 직선 JavaScript 버전을 사용할 수 있습니다.

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

다른 팁

나는 일주일 전에이 문제에 직면했다. 컨테이너를 표시 할 수 있도록 설정했습니다. 없음 jQuery를 사용하여 적절한 시간에 표시합니다.

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

jQuery.ready () 내부의 코드는 DOM이 준비 될 때까지 실행되지 않습니다. 따라서 한동안 눈에 보이도록 숨겨져있는 요소의 경우 정상입니다. 아코디언은 사용 편의성을 위해 부분적으로 이런 식으로 설정되며 부분적으로 우아한 타임을 위해 : JavaScript가 비활성화되면 콘텐츠가 누락되지 않습니다 (숨겨진).

JavaScript없이 휴식을 취하는 페이지를 기꺼이 위험에 빠뜨리려면 계속해서 요소를 숨기도록 설정하십시오. 그런 다음 .accordion () 직전에 show ().

다음은 호환성을 유지하는 아이디어입니다. 최소한 테스트를 거쳤으며 의견이 열려 있습니다.

CSS를 내버려 두지만 JavaScript 상단에 추가하십시오 (밖의 jQuery.ready()):

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

이렇게하면 페이지가 구성되면 숨겨진 요소를 숨기기 위해 CSS 규칙이 설정됩니다. 그런 다음 내부 jQuery.ready(), 전화 $(".yourclass").show() 아코디언을 초기화하기 전에 그들을 다시 데려 오기 위해.

.Accordion 바인딩을 직접 수행하십시오u003Cscript> just below the accordion elements instead of waiting for document ready.

그런 다음 페이지가 '준비'될 때까지 기다리지 않고 가능한 빨리 활성화됩니다 (특히 DomContentLoaded 이벤트를 지원하지 않는 IE에서는 오랜 시간이 걸릴 수 있으므로 jQuery는 ONLOAD를 기다려야합니다. 모든 이미지와 모든 것이로드 된 후에 화재).

너 ~할 수 있었다 아코디언 부모 요소를 '가시성 : 숨겨진'으로 설정 한 다음 스크립트가 초기화 될 때 수동으로 '가시'로 복원하십시오. 그러나 JavaScript가있는 브라우저는 콘텐츠가 전혀 보이지 않으며 이상적이지 않습니다.

접근성과 관련하여 이것을 사용하십시오.

body {
  display: none; 
}

어떤 이유로 든 JavaScript가 꺼져 있으면 아무것도 표시되지 않습니다.)

나는 UI 아코디언을 사용하지 않았지만 jQuery와 함께 아코디언을 구축했습니다. 스크립트가하는 유일한 일은 아코디언 패널의 가시성을 번갈아 가라는 것입니다. 따라서 페이지가로드 될 때 하나의 패널이 표시되면 다음과 같은 CSS 규칙을 사용해야 할 것입니다. 

ul.sub{
  visiblity:hidden;
  display:none;
}

나는 CSS의 요소를 숨기려고 노력했지만 로딩하는 동안 나타나는 것을 막으려 고했지만 달성 한 모든 것은 항상 숨겨져있는 것입니다.

CSS에 숨겨 지도록 시도한 다음이 작업을 수행하지 않겠습니까?

jQuery ( '#navigation'). show (). Accordian ...

많은 포털 사이트에서 수백 개의 jQuery 요소 (탭, 슬라이더 및 아코디언)가 있습니다. 각각의 숨기기/표시 스타일 설정은 현실적인 옵션이 아닙니다.

간단한 해결책, jQuery가 준비되고 요소를 만들 때까지 몸을 숨기고 몸을 보여줍니다.

내 마스터 스타일 시트에서 :

body {
  display: none; 
}

내 마스터 JavaScript 파일에서 jQuery.ready ()의 하단에 :

$(document).ready(function() { 
   $("body").show(); 
}

나는 One Tim과 같은 CSS 솔루션을 사용하고 있지만 JavaScript Disable (또는 JavaScript 지원이없는 장치)의 콘텐츠를 숨기는 것을 의미합니다. 공유해 주셔서 감사합니다.

나는 UI 아코디언을 사용하지 않았지만 jQuery와 함께 아코디언을 구축했습니다. 스크립트가하는 유일한 일은 아코디언 패널의 가시성을 번갈아 가라는 것입니다. 따라서 페이지가로드 될 때 하나의 패널이 표시되면 다음과 같은 CSS 규칙을 사용해야 할 것입니다.

ul.sub{
  visiblity:hidden;
  display:none;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top