두 div 사이에서 숨기기/표시 전환 jQuery

두 div간에 숨기기/표시를 전환하는 링크 작동을 시도하고 있습니다. 이상한 점이 없으며이 작업이 수행 된 많은 예제를 보았습니다. 내 기본 HTML 구조는 다음과 같다 :두 div 사이에서 숨기기/표시 전환 jQuery

<div id="wrapper"> 
    <div id="tog_A"> 
    <div id="tog_B"> 
</div> 

<a href="#" id="link">Toggle</a>

그리고 CSS : 내가 발견 한 다른 솔루션을 추가 할 때

#tog_A { 
    display:block; 
} 
#tog_A { 
    display:block; 
}

그러나 다른 자바 스크립트 코드와 충돌이 될 것 같습니다 내 사이트 사용. 자바 스크립트에 관해서는 정말 n00b입니다. 누군가가 올바른 방향으로 나를 가리킬 수 있으며 기존 코드와 새 코드를 결합하는 데 도움이 될 수 있습니다. 충돌 것으로 보인다

기존 JavaScrip :

//Load when dom ready 
jQuery(function() { 
// click listener for anchors 
jQuery(document).on("click",'a[href^="#"]', function(e) { 

// prevent click and side effects 
    e.preventDefault(); 

// do the scroll 
    jQuery('body, html').animate({ 
    scrollTop : jQuery(this.hash).offset().top 
    }); 

//change state of button 
var oldHash = jQuery(this.hash).attr("id").split("-"); 
var oldNr = parseInt(oldHash[1],10); 
var nrOfAllSections = jQuery('[id^="section-"]').length; 
var nr = oldNr == nrOfAllSections ? 1 : oldNr+1; 
if(oldNr == nrOfAllSections) { 
    jQuery(this).text("Top ▴"); 
    } else { 
    jQuery(this).text("Down ▾"); 
    } 
var newHash = "#"+oldHash[0]+"-"+ nr; 
jQuery(this).attr("href", newHash); 
}); 

jQuery(document).on('click', "#scrollToInfo", function(e) { 
    e.preventDefault(); 
    var nrOfAllSections = jQuery('[id^="section-"]').length; 
    var hrefHash = "#section-" + nrOfAllSections; 
    var ypos = jQuery(hrefHash).offset().top; 
    window.scrollTo(0, ypos); 
    jQuery('a#scrollToBottom').text("Top ▴").attr("href", "#section-1"); 
}); 

});

출처

2016-10-01 Torbjörn Hedberg

난 당신이 도움을 필요로하는 이유에 혼란 스러워요. * "이 작업이 수행 된 곳에서 많은 예제를 보았습니다."*이 예제를 사용하지 않는 이유는 무엇입니까? 분명히 그것은 자신의 소스 코드에 맞게 일부를 편집하는 것을 의미합니다 .... – NewToJS

사용이 기술은

$("#link").click(function() { 
     if ($("#tog_A").is(":visible")) { 
     $("#tog_A").hide(); 
     $("#tog_B").show(); 
     } else { 
     $("#tog_B").hide(); 
     $("#tog_A").show(); 
     } 
    });

출처

2016-10-01 16:33:07

<head> 
<script> 
    var toggle = function() { 
    var mydiv = document.getElementById('tog_A'); 
    var mydiv2 = document.getElementById('tog_B'); 
    if (mydiv.style.display === 'none' || mydiv.style.display === '' ||  mydiv2.style.display === 'none' || mydiv2.style.display === '') 
    mydiv.style.display = 'block'; 
    mydiv2.style.display = 'block'; 

else 
    mydiv.style.display = 'none' 
    mydiv2.style.display= 'none' 
} 

</script> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="tog_A" style="display:none;"> 
    <div id="tog_B" style="display:none;" > 
</div> 

    <a href="#" onclick="toggle();" id="link">Toggle</a> 
<body>

출처

2016-10-01 16:51:03

이것은 내 웹 사이트에서 작동합니다. 사람들이 내 웹 사이트를 모바일에서 볼 때 잘 작동하는 용도로 사용됩니다. –

두 div 사이에서 숨기기/표시 전환 jQuery

답변

관련 문제