wie ein-und ausblenden einer Schaltfläche nachdem Sie geklickt haben, auf einen anderen Knopf?

Ich bin gonna verwenden Sie zwei Schaltflächen in eine Seite. So etwas wie, wenn wir klicken auf den ersten und dann den zweiten button erschien, anstatt auf der ersten, und wenn wir klicken auf den zweiten dann erste erschien. ohne Verlust der Funktion der Schaltfläche.

hier ist mein button code:

<button id="button1" onclick="menu2.toggle()" class="sideviewtoggle myButton">Test 1</button>
<button id="button2" onclick="menu3.toggle()" class="sideviewtoggle myButton">Test 2</button>

Beispiel:

Test 1 ist Standard, und test 2 verborgen ist, wenn wir klicken auf test 1 dann test 1 verschwinden und stattdessen test 2 erschienen und wieder, wenn wir klicken auf test 2 dann wird es verschwunden sein, und stattdessen test 1 erschienen. ohne onclick Funktion dieser beiden Tasten.

Hier ist meine toggle-Menü Funktion, wenn wir klicken auf die test-Taste 1, dann ist diese Seite: togglemenu.php wird sich öffnen, und wenn wir klicken Sie auf test 2, dann togglemenu2.php wird auch offen. 

jQuery(function(){
menu2 = new sidetogglemenu({  
id: 'togglemenu2', 
position: 'right',
source: 'togglemenu.php', 
revealamt: -5
})

jQuery(function(){
menu3 = new sidetogglemenu({  
id: 'togglemenu3', 
position: 'right',
source: 'togglemenu2.php', 
revealamt: -5
})

Wie du es machen?

Vielen Dank im Voraus.

  • document.getElementById('yourButtonId').style.display='none'; zu verstecken document.getElementById('yourButtonId').style.display=''; zu zeigen
  • Dies ist nur für das ein-und ausblenden-button, ich brauche eine Funktion zum ein-und ausblenden, nach dem Klick. und ist es möglich die element-Klasse?
InformationsquelleAutor Alexander Richard | 2015-11-28
  1. 1

    Durch, ohne die Funktion der Schaltfläche, ich nehme an, du meinst, dass Sie möchten, halten Sie die Menü-Taste. Was Sie tun müssen, ist, definieren Sie Ihre eigene Funktion, und innerhalb dieser Funktion, toggle-Menü, UND führen Sie die Karte ein - /ausblenden, die Sie wünschen.

    Unter der Annahme, dass Sie neu in javascript, schrieb ich dieses Beispiel zu einfach.

    JS:

    //With a function, I am able to perform multiple tasks 
function SwitchButtons(buttonId) {
  var hideBtn, showBtn, menuToggle;
  if (buttonId == 'button1') {
    menuToggle = 'menu2';
    showBtn = 'button2';
    hideBtn = 'button1';
  } else {
    menuToggle = 'menu3';
    showBtn = 'button1';
    hideBtn = 'button2';
  }
  //I don't have your menus, so this is commented out.  just uncomment for your usage
  //document.getElementById(menuToggle).toggle(); //step 1: toggle menu
  document.getElementById(hideBtn).style.display = 'none'; //step 2 :additional feature hide button
  document.getElementById(showBtn).style.display = ''; //step 3:additional feature show button


}

    HTML:

    <button id="button1" onclick="SwitchButtons('button1');" class="sideviewtoggle myButton">Test 1</button>
<button id="button2" onclick="SwitchButtons('button2');" class="sideviewtoggle myButton" style='display:none;'>Test 2</button>

    • Sie code ist gut, aber Sie verwendet SwitchButtons onclick-Funktion, Wie zu halten meine onlclick Funktion, ich meine, wie hinzufügen menu2.toggle() und menu3.toggle() in deinem code?
    • es ist da, schauen Sie auf der auskommentierten Zeile (ich kommentierte es aus denn ich habe nicht den Menüs, so hätte es einen script-Fehler)
    • eigentlich jetzt ein-und ausblenden funktioniert gut, aber mein onclick-Funktion funktioniert nicht. das ist, warum.
    • können Sie Ihre html-Menüs so gut?
    • und auch, haben Sie kommentieren Sie diese?document.getElementById(menuToggle).toggle();
    • Ich aktualisiert meine Frage, ist die Abfrage onclick-Funktion wird öffnen zwei separate Seiten, wie Sie sehen können, in den oben
    • hier ist auch der html-button der Basis-code: <button style="" id="button1" onclick="SwitchButtons('button1');" class="sideviewtoggle myButton">Test 1</button>
    • Vielen Dank, Es funktioniert nun, ich habe onlick Funktion so: onclick=\"menu2.toggle() , SwitchButtons('button1');\"

    InformationsquelleAutor Eric Phillips
  2. 0

    Andere Möglichkeit besteht darin, anstatt ausblenden/einblenden Tasten, könntest du JavaScript verwenden, um das Aussehen und die Funktionsweise der Schaltfläche dynamisch.

    JS:

    function toggle(ev) {
  ev.target.dataset.state = ev.target.dataset.state === 'menu1' ? 'menu2' : 'menu1';
  ev.target.textContent = ev.target.textContent === 'Test 1' ? 'Test 2' : 'Test 1';
  if (ev.target.dataset.state === 'menu1') {
    //Add code to display Menu 1 here.
  } else if (ev.target.dataset.state === 'menu2') {
    //Add code to display Menu 2 here.
  }
}

document.querySelector('button').addEventListener('click', toggle);

    HTML:

    <button type=button name=toggleButton data-state=menu1>Test 1</button>

    Die Art und Weise, in der Sie ein-oder ausblenden der verschiedenen Menüs konnte verfolgen einen ähnlichen Ansatz wie gut. So könnten Sie eine toggleButton Funktion, und innerhalb dieser Funktion rufen Sie einen toggleMenu Funktion.

    • welche library benutzt du für diese? es funktioniert nicht auf html-Seite, die ich Hinzugefügt neueste j-query 2.1.1 funktioniert aber nicht.
    • keine Bibliothek - plain-vanilla-JS
    • haben Sie eine andere Taste, die früher auf der Seite? die queryselector könnte hinzufügen werden die Zuhörer auf, dass statt. versuchen Sie geben dem button eine id und die queryselector Ziel, dass die id statt.
    • Es sind nur zwei buttons auf dieser Seite, test1 und test2 habe ich noch die ID für jeden von Ihnen-id="button1" und id="button2", ein-und ausblenden von Schaltflächen Lesen sollten, basierend auf ID nicht onlick Funktion, Ursache siehe oben @dwhieb, onlick Funktion funktioniert nicht richtig
    • nur um zu klären, was ich Vorschlage, ist nur mit Taste 1, nicht 2. Die Schaltfläche ändern wird, wie es ist die Anzeige jedes mal, wenn Sie klicken Sie auf es. Auch, wenn Sie addEventListener, stellen Sie sicher, Sie sind nicht mit der onclick= - Attribut zu.
    InformationsquelleAutor dwhieb
  3. 0

    ich denke, wenn Ihr mit Jquery es ist besser, erstellen Sie eine versteckte css-Klasse 

    .hidden {
  display: none;
}

    und entfernen Sie oder fügen Sie mit der Methode .addClass() or .removeClass()

    Beispiel:

    html-Datei: 

    <button id="hideMenu" class="sideviewtoggle myButton">Test 1</button>

    js-Datei

    $('#hideMenu').on('click', function() {
  $('#menu-to-hide').addClass('hidden');
  //or
  $('#menu-to-show').removeClass('hidden');
});
    • könnten Sie mir bitte ein Beispiel für die Verwendung von css mit jquery?wie zu verwenden addclass und removeclass in jquery ?
    InformationsquelleAutor hirosmans
Schreibe einen Kommentar