jQuery - Toggle text zu ändern, klicken Sie auf

Ich habe eine Menü-Taste, die, wenn geklickt wird unten schieben, ein div unten.

Mein Menü ist der Titel "+ Öffnen Sie das Menü"

Wenn Sie die Menü-Taste geklickt wird mein code ändert den Titel auf "+ Menü", um anzuzeigen, dass das Menü geöffnet ist.

Wenn der Benutzer das Menü wird geschlossen, ich möchte den Titel wieder auf "Menü"

Dies ist mein HTML definiert die Klasse test in diesem Fall.

<span class="test">+ Open menu</span>

Hier mein jQuery-Funktion, die ich kann nicht herausfinden, wie, um wieder das Menü Status.

$(document).ready(function () {
$(".widget_head_type").click(function () 
{
    $(".widget_body_type").slideToggle("slow");
    $(".test").text("- Close menu");
});

});

Mögliche Duplikate von jQuery Toggle Text?

InformationsquelleAutor BallSoHard | 2014-03-08

$(".widget_head_type").click(function () {
    $(".widget_body_type").slideToggle("slow");
    ($(".test").text() === "+ Open menu") ? $(".test").text("- Close menu") : $(".test").text("+ Open menu");
});

Ich fürchte, diese Methode nicht funktioniert. jsfiddle.net/YKN84
Sie hatte ein paar Rechtschreibfehler, siehe: jsfiddle.net/YKN84/1
Es ist schon spät 😉 vielen Dank!

InformationsquelleAutor Bitter

jQuery.fn.extend({
    toggleText: function (a, b){
        var that = this;
            if (that.text() != a && that.text() != b){
                that.text(a);
            }
            else
            if (that.text() == a){
                that.text(b);
            }
            else
            if (that.text() == b){
                that.text(a);
            }
        return this;
    }
});

Verwendung als:

$("#YourElementId").toggleText('After', 'Before');

danke!!! er arbeitete als code!
obwohl eine liner-Lösung wäre diese $.fn.extend({ toggleText: function(a, b){ return this.text(this.text() == b ? a : b); } }); nicht genau eine Linie, meine ich. die Nutzung ist die gleiche wie deins $(".example").toggleText('Initial', 'Secondary');

InformationsquelleAutor Diego Favero

Hier ist eine interessante basierend auf der http://api.jquery.com/toggle/

HTML

<span class="test">+ Open menu</span>
<span class="test" style="display:none">- Close menu</span>

$(document).ready(function () {
$(".widget_head_type").click(function () 
{
    $(".widget_body_type").slideToggle("slow");
    $(".test").toggle();
});

Einfach, nur schaltet der alle tags mit der Klasse test, ob versteckt oder sichtbar.

plus eins 🙂 das ist innovativ

InformationsquelleAutor user3257693

ARBEITET FIDDLE HIER

Habe ich erraten Sie Ihre html -, und machte sich ein paar Notizen für alternativen, aber Sie betrachten Sie das folgende:

HTML:

<div class="some_parent_class">
    <div class="widget_head_type">
        <span class="test">+ Menu</span>
    </div>
    <div class="widget_body_type">
        Body
    </div>
</div>

JS:

jQuery(function ($) {
    $('.widget_head_type').each(function () {
        //closures
        var $toggle = $(this);
        var $parent = $toggle.closest('.some_parent_class');
        var $target = $parent.find('.widget_body_type');
        var $label = $toggle.find('.test');
        var bIsTweening = false;
        //OR var $target = $toggle.next('.widget_body_type');
        //event methods (closures)
        var fClickToggle = function () {
            if (!bIsTweening) {
                bIsTweening = true;
                $target.slideToggle('slow', fToggleCallback);
            }
        };
        var fToggleCallback = function () {
            bIsTweening = false;
            fSetLabel();
        };
        var fSetLabel = function () {
            var sLabel = $label.text().replace('+', '').replace('-', '');
            sLabel = ($target.is(':visible') ? '-' : '+') + sLabel;
            $label.html(sLabel);
        };
        //handle event
        $toggle.click(fClickToggle);
        $target.hide();
        fSetLabel();
    });
});

VIEL code für diese einfache Aufgabe

InformationsquelleAutor Levi Beckman

hatte dasselbe Problem und das ist, wie ich es gelöst: mit Ihrem code Beispiel.

$(".widget_head_type").click(function () {
    $(".widget_body_type").slideToggle("slow");
    ($(".test").text() == "+ Open menu") ? $(".test").text("- Close menu") : $(".test").text("+ Open menu");
});

verwenden Sie zwei Gleichheitszeichen zum Vergleich.

InformationsquelleAutor Ossaija D

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.