Benutzerdefiniertes jQuery-Plugin und CSS zum Anzeigen und Ausblenden von Inhalten

The requirement: Wir müssen einen reduzierbaren Inhalt anzeigen, wenn wir auf die Schaltfläche "Anzeigen" geklickt haben, und den reduzierbaren Inhalt ausblenden, wenn wir auf die Schaltfläche "Ausblenden" geklickt haben.

The solution: Erstellen Sie ein benutzerdefiniertes jQuery-Plugin.

Demo: Klicken Sie auf die Schaltfläche "Anzeigen".

Note
Hier ist die alternative Lösung -jQuery toggle() Funktion.

1. Zusammenklappbarer Inhalt

Unten finden Sie ein Beispiel für HTML für komprimierbaren Inhalt:


    




Use jQuery + CSS to hide/show collapse content
    
        
    
    
    Bla bla bla bla

Das "div" -Element in über<div id="collapse2" class="collapse"> ist "hide". Wo der CSS "Zusammenbruch" "display:none" hat, wie unten:

.collapse {
    display: none;
    position: relative;
    overflow: hidden;
}

Hinweis
Das

wird ausgeblendet, wenn der CSS-Klassenname "reduziert" wird.

2. Benutzerdefiniertes jQuery-Plugin

Um den Inhalt anzuzeigen, wenn wir auf die Schaltfläche "Anzeigen" geklickt haben, müssen wir ein Klickereignis für die Schaltfläche "Anzeigen" wie folgt erstellen:

$('.nav-collapse').click(function(){
    //logic to show/hide collapsable content
});

Zuerst müssen wir den Selektor für komprimierten Inhalt aus dem Attribut href holen:

var collapse_content_selector = $(this).attr('href');

Anschließend überprüfen wir mit jQuery, ob das reduzierbare Inhaltselement den CSS-Klassennamen "show" hat:

var collapse_content = $(collapse_content_selector);
if(collapse_content.hasClass('show')){
    //logic to hide the collapsable content
}else{
    //logic to show the collapsable content
}

Um den komprimierbaren Inhalt auszublenden, müssen Sie den CSS-Klassennamen "show" wie folgt entfernen:

collapse_content.removeClass('show');

Um den komprimierbaren Inhalt anzuzeigen, müssen Sie den CSS-Klassennamen "show" wie folgt hinzufügen:

collapse_content.addClass('show');

Wo CSS "show" verwendet wird, um die CSS-Eigenschaften "display" so zu ändern, dass sie wie folgt "blockieren":

.show{
    display: block;
}

Note
Damit der reduzierbare Inhalt beim Laden der Seite angezeigt wird, müssen Sie den CSS-Klassennamen "show" wie<div class="collapse show">....</div> hinzufügen.

Zuletzt benötigen wir eine Rückruffunktion, um die Beschriftung der Schaltflächen auf "Verstecken / Anzeigen" zu ändern. Beispiel:

Rückruffunktion, wenn komprimierbarer Inhalt angezeigt wird:

$('.nav-collapse').html('Hide');//change the button label to be 'Hide'

Rückruffunktion bei ausgeblendetem Inhalt:

$('.nav-collapse').html('Show');//change the button label to be 'Show'

Daher müssen wir Callback-Funktionen wie folgt an das jQuery-Plugin übergeben:

{
  onShow: function(){
    $(this).html('Hide');//change the button label to be 'Hide'
  },
  onHide: function(){
    $(this).html('Show');//change the button label to be 'Show'
  }
}

Unten ist der endgültige Quellcode des Plugins:

(function($) {
  $.fn.collapse=function(options){
    $(this).click(function(){
        //get collapse content selector
        var collapse_content_selector = $(this).attr('href');

        //make the collapse content to be shown
        var collapse_content = $(collapse_content_selector);
        if(collapse_content.hasClass('show')){
            collapse_content.removeClass('show');
            $(this).html('Show');
            if(options && options.onHide){
                options.onHide();
            }
        }else{
            collapse_content.addClass('show');
            if(options && options.onShow){
                options.onShow();
            }
        }
    });
  }
}(jQuery));

und jQuery um das Plugin zu benutzen:

$('.nav-collapse').collapse({
    onShow: function(){
        $(this).html('Hide');//change the button label to be 'Hide'
    },
    onHide: function(){
        $(this).html('Show');//change the button label to be 'Show'
    }
});

3. Vollständiges Beispiel


  
    Use jQuery + CSS to display and hide content

    
    
        
    
    
        
            Use jQuery + CSS to hide/show collapse content
            
            
            
            
                Bla bla bla bla

Quellcode herunterladen

Laden Sie es herunter -jQuery-css-to-display-hide-content.zip (1kb)

TOC

Benutzerdefiniertes jQuery-Plugin und CSS zum Anzeigen und Ausblenden von Inhalten