Sie befinden sich hier: start » jquery_konfiguration

jQuery Konfiguration

jQuery Konfiguration

Hier ein paar Beispiele.

Accordion Effekt

$(document).ready(function(){
  $("#accordion").accordion({
    collapsible:!0,
    active:0,
    event:"click",
    heightStyle:"content",
    animate: {duration:"2000",easing:"swing"}
  })
});  

Scrollicon Konfiguration

Das Scrollicon ermöglicht dem Besucher, zum Beginn der Seite zu springen. Dazu wird eine Schaltfläche generiert, die an einem Platz über der Seite schwebt.
Hier finden Sie das CSS dazu.

$(document).ready(function(){
  $(".scrollicon").click(function(){
    return $("html, body").animate({scrollTop:0},500),!1})
  });
});

JavaScript für Mega Menu

Bootstrap 4 erlaubt die Einbindung eines Mega Menus, mit dem Inhalte für eine Navigation responsiv für mehrere Ebenen und mit individuellem Layout erstellt werden können. Dazu ist die Einbindung dieses kurzen JavaScripts notwendig. Der Aufbau der Navigation geht über ein TypoScript. Die Inhalte bekommen dann über ein eigenes Style Sheet ihr Layout.

$(document).ready(function() {
  $(".megamenu").on("click", function(e) {
    e.stopPropagation();
  });
});  

Inhalt öffnen und verstecken

$(document).ready(function () {
  $(".liste_inhalt:visible").hide();
  $(".liste_titel").mouseover(function () {
    $(".liste_inhalt").show();
  });
  
  $(".liste_fuss").click(function () {
    $(".liste_inhalt:visible").hide();
  });
});

Inhalt mit Sliding öffnen

$(document).ready(function () {
  $(".div_neu_content:visible").hide();
  
  $(".div_neu_div").mouseover(function () {
    $(".div_neu_content:visible").hide();
    $(this).next("div").slideToggle(200);
  });
  
  $(".div_neu_titel").mouseleave(function () {
    $(".div_neu_content:visible").hide(200);
  }); 
});

CSS Klassen hinzufügen und entfernen

Wenn man nicht einzelne CSS Attribute bearbeiten will, kann man auch Styles zuweisen bzw. entfernen

$(document).ready(function () {
  $(".div_tab_titel").mouseover(function () {
    $(".div_tab_titel").removeClass('div_tab_titel_hover'); 
    $(this).addClass('div_tab_titel_hover'); 
  });  
});  

Tabs am Ende jeder Seite

In diesem Fall werden einzelne CSS Attribute geändert.

$(document).ready(function () {
  $("#content").slideToggle(1);
  
  ## Titel beim MouseOver formatieren
  ## Einzelne Style Attribute überschreiben
  $(".div_tab_titel").mouseover(function () {
    $(".div_tab_titel").css('background-color', '#2d80a8');
    $(".div_tab_titel").css('border-bottom-color', '#2d80a8');
    $(".div_tab_titel").css('color', '#ffffff');
    $(this).css('background-color', '#efefe7');
    $(this).css('color', '#2d80a8');
    $(this).css('border-bottom-color', '#efefe7');
  });
      
  ## Inhalte der Tabs bei MouseOver anzeigen
  $("#tab[dang='0']").mouseover(function() {
    $(".div_tab_content:visible").hide();
    $("#content[dings='0']").slideToggle(1);
  });
  $("#tab[dang='1']").mouseover(function() {
    $(".div_tab_content:visible").hide();
    $("#content[dings='1']").slideToggle(1);
  });
  $("#tab[dang='2']").mouseover(function() {
    $(".div_tab_content:visible").hide();
    $("#content[dings='2']").slideToggle(1);
  });
  $("#tab[dang='3']").mouseover(function() {
    $(".div_tab_content:visible").hide();
    $("#content[dings='3']").slideToggle(1);
  });
});