JQuery의 토글()을 #anchors와 섞음

안녕하세요, 다음과 같은 딜레마가 있습니다. 기본적으로 숨겨진 하위 DIVS가 포함 된 DIV 세트가 있습니다. 처음에는 앵커로 javascript와 onclick을 사용하여 전환 및 '앵커로 이동'효과를 얻었습니다. 이제 JQuery 대안으로 이동 했으므로 동일한 'move-to-anchor'효과를 재현하는 데 문제가 있습니다. 토글 링은 잘 작동합니다.JQuery의 토글()을 #anchors와 섞음

상위 div에서 "h2 a"링크를 클릭하면 하위 div가 토글되어 표시됩니다. 여기

<div class="full email"> 
<a id="test_anchor"></a> 
    <h2 class="subsubtitle"><a href="#test_anchor">TITLE AND LINK</a></h2> 
    <div class="description full"> 
    <p>THIS IS WHAT SHOWS ALL THE TIME, REGARLDESS OF THE TOGGLE</p> 
    </div><!-- #description ends here --> 

    <div id="c_1"> 
    THE DIV AND THE CONTENTS THAT ARE SHOWN AND HIDDEN 
    </div><!-- #c_1 div ends here --> 

</div><!-- .full .email ends here -->

// 그리고 JQuery와는 다음과 같습니다 : 여기에 하나의 부모와 자식 사업부 설정의 샘플입니다

이

$(document).ready(function(){ 

$("#c_1,#c_2,#c_3,#c_4").hide(); 

$("div div h2 a").toggle(
    function() { $(this).parent().siblings("div:last").slideDown("slow") }, 
    function() { $(this).parent().siblings("div:last").hide() } 

    ); 

});

지금 질문입니다 : 어떻게 활성화 또는 #anchor을 활성화 않도록 둘다 Jquery slideDown/hide 함수와 goold old 'move-to-anchor'가 작동합니까?

종류는 당신이 그들 내부의하지 무엇을, 일치하는 요소의 가시성을 전환하는 토글 기능으로 무슨 일을하는지 G.Campos

출처

2009-03-16 Anonymous

을 간주한다. 이 같은

시도 뭔가 :

$(function(){ 
    $("#c_1,#c_2,#c_3,#c_4").hide(); // good practice to hide in JS instead of CSS file :) 

    // Assign toggle functionality. 
    $("h2.subsubtitle a").click(function(){ 
    var jDiv = $(this).parent().siblings("div:last"); 

    if(jDiv.is(":visible")){ 
     jDiv.hide("slow"); // you're toggling this div, not the anchor. 
    } else { 
     jDiv.show("slow"); 
    } 

    return true; // if switched to false, anchor won't link to anything. 
    }); 
});

출처

2009-03-16 20:43:03 Seb

document.ready에도 숨겨진 요소의 깜박임을 방지하는 데 사용할 수있는 추가 트릭이 있습니다. 여기를보세요 - http://www.learningjquery.com/2008/10/1-awesome-way-to-avoid-the-not-so-excellent-flash-of-amazing-unstyled-content –

멋진데. 속임수, 공유 주셔서 감사합니다! :) – Seb

글쎄, 문제는 위의 코드가 앵커가 작동하고 토글 자체가 있다는 것입니다. 단, HIDDEN에서 SHOWN으로 갈 때만 가능합니다. 열린 후에는 다시 닫을 수 없습니다. Jquery에 익숙하지 않아 토글이 완전히 작동하도록 제공된 솔루션에 hide()를 던져 넣을 방법이 확실하지 않습니다. –

당신은 something like this을 달성하기 위해 노력 했습니까?

관련 jQuery 코드

$(function(){ 

    $("#c_1").hide(); 

    $("h2.subsubtitle a").toggle(
    function() { $(this).parent().siblings("div:last").slideDown("slow"); return false;}, 
    function() { $(this).parent().siblings("div:last").slideUp("slow"); return false; }      
    ); 

});

편집 :

는 귀하의 의견에 대응하여, 내가 this example에 표시/숨기기 부분의 숫자를 넣어 가지고 모두가 나를 위해 잘 작동하는 표시 IE6 및 Firefox 3. URL에 /edit을 추가하여 코드를 편집 할 수 있습니다. 이 예제가 당신을 위해 잘 작동하고 어떤 브라우저를 사용하고 있습니까?

출처

2009-03-16 23:05:48

러스에게 감사드립니다. 예, 제공 한 URL 샘플은 찾고자하는 효과가 있습니다. 표시/숨기기 전환. 그러나, 내 페이지에서, 그 부모 divs 및 각각의 자식 div 많은 데, 일종의 오류가 것 같습니다. 코드를 사용해 보았습니다. 일단 하위 div가 열리면 닫히지 않습니다. –

JQuery의 토글()을 #anchors와 섞음

답변

관련 문제