ein-/ausblenden Tasten verschwinden

Question

$(document).ready(function() { 
 
    $("button").click(function() { 
 
    $("#incl").toggle(500); 
 
    $(this).hide(); 
 
    $("button").text('hide'); 
 
    }); 
 
});

#incl { 
 
    display: none; 
 
} 
 
.incl { 
 
    position: absolute; 
 
    z-index: 800; 
 
    background-color: #00689C; 
 
    text-align: left; 
 
    padding: 0 5px 5px 5px; 
 
    color: #ffffff; 
 
    font-size: 1.25em; 
 
    border-radius: 3px; 
 
    line-height: 1.5em; 
 
    margin: -197px -10px 0 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script> 
 
    $(document).ready(function() { 
 
    $("button").click(function() { 
 
     $("#incl").toggle(500); 
 
     $(this).hide(); 
 
     $("button").text('hide'); 
 
    }); 
 
    }); 
 
</script> 
 

 
<button>INCLUDES</button> 
 
<div id="incl"> 
 
    <ul class="incl"> 
 
    <li>bla bla bla</li> 
 
    <li>bla ti bla</li> 
 
    <li>bla bla</li> 
 
    </ul> 
 
</div>

Als ich dieses Szenario laufen die Taste verschwindet. was würde ich gerne tun, ist die Schaltfläche, die Echo "enthält" muss echo "verstecken" statt Ich versuche, eine Schaltfläche, die Details zu zeigen und dann ausblenden.

Answer 1

Dies sollte das sein, wonach Sie suchen. Mit $(this).text() (ohne Parameter) erhalten Sie den aktuellen Text der Schaltfläche. Ich speichere es und tausche es dann basierend auf dem, was es gerade eingestellt hat, und wechsle es zwischen "AUSBLENDEN" oder "EINSCHLIEßEN".

Sie können auch eine der folgenden Aktionen ausführen:

• zwei Schaltflächen erstellen und zwei Klick-Handler. Der erste Show-Button zeigt den "Verstecken" -Button, zeigt den Inhalt an und versteckt den "Show" -Button. Der 2. Versteckknopf wird das Gegenteil tun.
• Legen Sie einen booleschen Wert fest, wenn der Inhalt angezeigt wird (außerhalb der Funktion). Dann wird eine if/else-Anweisung bestimmen, ob sie gesetzt ist oder nicht:

if (contentShown) 
{ 
    $('#content').hide(); 
    $('#button').text('Show'); 
} 
else 
{ 
    $('#content').show(); 
    $('#button').text('Hide'); 
} 
contentShown = !contentShown; //Invert contentShown (Set it to true if false, or false if true) 

Bitte beachten Sie, bemerkte ich aus der Marge/Position in der CSS es im Snippet unten zu zeigen.

$(document).ready(function() { 
 
    $("#toggle").click(function() { 
 
     $("#incl").toggle(500); 
 
     var currentText = $(this).text(); 
 
     $(this).text(currentText == "INCLUDES" ? "HIDE" : "INCLUDES"); 
 
    }); 
 
    });

#incl { 
 
    display: none; 
 
} 
 
.incl { 
 
    /*position: absolute;*/ 
 
    z-index: 800; 
 
    background-color: #00689C; 
 
    text-align: left; 
 
    padding: 0 5px 5px 5px; 
 
    color: #ffffff; 
 
    font-size: 1.25em; 
 
    border-radius: 3px; 
 
    line-height: 1.5em; 
 
    /*margin: -197px -10px 0 0;*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<button id="toggle">INCLUDES</button> 
 
<div id="incl"> 
 
    <ul class="incl"> 
 
    <li>bla bla bla</li> 
 
    <li>bla ti bla</li> 
 
    <li>bla bla</li> 
 
    </ul> 
 
</div>

Answer 2

Der Grund für die Ihre Schaltfläche verschwindet ist diese Zeile:

$(this).hide(); 

innerhalb des Click-Handler.

Darüber hinaus hat Ihre Klasse einschließlichMarge: -197px -10px 0 0;, dies bedeutet, dass Sie dies anpassen müssen, wenn Sie den Inhalt anzeigen.

In Ihrem Click-Handler können Sie auf die Schaltfläche Text testen, um die richtigen Maßnahmen zu entscheiden, zu tun:

$(document).ready(function() { 
 
    $("button").click(function() { 
 
    $("#incl").toggle(500); 
 
    var sign = '-'; 
 
    var txt = 'INCLUDES'; 
 
    // 
 
    // According to the button text you can decide 
 
    // the next button text and if you need 
 
    // to correct the margings of your element 
 
    // adding or removing for the margins. 
 
    // 
 
    if (this.textContent == 'INCLUDES') { 
 
     sign = '+'; 
 
     txt = 'hide'; 
 
    } 
 
    $('.incl').animate({"margin-top": sign + "=197px", "margin-right": sign + "=10px"}, 500) 
 
    $("button").text(txt); 
 
    }); 
 
});

#incl { 
 
    display: none; 
 
} 
 

 
.incl { 
 
    position: absolute; 
 
    z-index: 800; 
 
    background-color: #00689C; 
 
    text-align: left; 
 
    padding: 0 5px 5px 5px; 
 
    color: #ffffff; 
 
    font-size: 1.25em; 
 
    border-radius: 3px; 
 
    line-height: 1.5em; 
 
    margin: -197px -10px 0 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<button>INCLUDES</button> 
 
<div id="incl"> 
 
    <ul class="incl"> 
 
     <li>bla bla bla</li> 
 
     <li>bla ti bla</li> 
 
     <li>bla bla</li> 
 
    </ul> 
 
</div>