Toggle verstecken/zeigen zwischen zwei divs jQuery

Ich versuche, eine Verknüpfung arbeiten, die ausblenden/anzeigen zwischen zwei Divs umschalten wird. Nichts Seltsames und ich habe viele Beispiele gesehen, wo das gemacht wurde. Meine grundlegende HTML-Struktur ist wie folgt:Toggle verstecken/zeigen zwischen zwei divs jQuery

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

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

und CSS:

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

Allerdings, wenn ich die verschiedenen Lösungen hinzufügen, die ich gefunden habe, scheint es einen Konflikt mit einem anderen JavaScript-Code zu sein, meine Website verwendet. Ich bin ein echtes n00b, wenn es um JavaScript geht, vielleicht kann mir jemand in die richtige Richtung zeigen und mir helfen, meinen bestehenden Code mit dem neuen zu kombinieren.

Bestehende JavaScrip, die in Konflikt zu sein scheint:

//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"); 
}); 

});

Quelle

2016-10-01 Torbjörn Hedberg

Ich bin verwirrt, warum Sie Hilfe benötigen. * "Ich habe eine Menge Beispiele gesehen, wo das gemacht wurde" * Warum nicht einfach diese Beispiele verwenden? Offensichtlich bedeutet es, einige davon zu bearbeiten, damit sie zu Ihrem eigenen Quellcode passen .... – NewToJS

Mit dieser Technik

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

Quelle

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>

Quelle

2016-10-01 16:51:03

Das funktioniert auf meiner Website, ich benutze es, wenn Leute meine Website auf meinem Handy sehen, funktioniert das gut für mich. –

Toggle verstecken/zeigen zwischen zwei divs jQuery

Antwort

Verwandte Themen