0
votes

Comment masquer / afficher par div avec la classe sur l'interrupteur à bascule

Je dois implémenter un interrupteur à bascule où si vous cliquez la première fois, un div avec une classe spécifique sera masqué. Si vous cliquez à nouveau dessus, le div doit être affiché à nouveau. Jusqu'à présent, j'ai essayé de le résoudre avec un petit script jquery. Je dois dire que je ne suis pas un expert en questions. Donc, si vous avez de meilleures solutions avec un autre langage de script, je suis ouvert pour vous les entrées ;-)

La partie hide fonctionne parfaitement. Seule la partie consistant à afficher à nouveau le div après un deuxième clic ne fonctionne pas.

C'est le code que j'ai jusqu'à présent:

html: p>

$(document).ready(function(){

  $(".hide-off").click(function(){
    $(".hideme").hide();
    $(this).removeClass('hide-off');
    $(this).addClass('hide-on');
  });

  $(".hide-on").click(function(){
    $(".hideme").show();
    $(this).removeClass('hide-on');
    $(this).addClass('hide-off');
  });

});

jquery:

<label class="switch"><input type="checkbox"><span class="slider round hide-off"></a></span></label>
<br><br>
<div class="hideme">
  Please hide me, but bring me back later ;-)
</div>

Trouvez tout le code, y compris CSS / style ... ici: https://jsfiddle.net/r9newfmb/1/

javascript jquery html class

4 commentaires

jQuery a une fonction de bascule spéciale que vous devriez essayer, documentation

pouvez-vous ajouter votre css?

Et pouvez-vous vérifier votre html certaines balises ne se sont pas fermées correctement

Votre * $ (". Hide-on"). Click * ne se déclenche pas avez-vous vérifié?

5 Réponses :

1
votes

vous pouvez facilement le faire en utilisant la fonction bascule jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch"><input type="checkbox"><span class="slider round toggle-switch"></a></span></label>
<br><br>
<div class="hideme">
  Please hide me, but bring me back later ;-)
</div>

$(document).ready(function(){

$(".toggle-switch").click(function(){
  $(".hideme").toggle();
});

});

0 commentaires

0
votes

Essayez ceci, vanilla JS.

document.querySelector('[data-toggle]').addEventListener('click', (item) => {
 const toggle = document.querySelector('[data-toggle-this]')
 const isVisible = toggle.classList.contains('show') // Here we check that our element has class show
 if (isVisible) {
  toggle.classList.remove('show') // Here we remove class if it is
 } else {
  toggle.classList.add('show') // Here we added class
 }
})

Je pense que le JS pur / vanilla sera plus facile.

<button data-toggle="">Hide/Show</button>

<p data-toggle-this="">Hello</p>

0 commentaires

1
votes

Je vérifierais l'état de la case à cocher.

$(document).ready(function(){
  $(".switch input").on("change", function(e) {
    const isOn = e.currentTarget.checked;

    if (isOn) {
        $(".hideme").hide();
    } else {
        $(".hideme").show();
    }
  });
});

Cliquez ici: https://jsfiddle.net/o8ruye1k/3/

0 commentaires

0
votes

Plus probablement votre code, mais votre fonction "hide-on" ne fonctionne pas

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch"><input type="checkbox"><span class="slider round hide-off"></span></label>
<br><br>
<div class="hideme">
  Please hide me, but bring me back later ;-)
</div>

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

/*END OF TOGGLE SWITCH*/



.hideme {
  padding:20px;
  background: blue;
  color: white;
  font-weight: 800;
  text-align: center;
}

$(document).on('click', '.hide-off', function () {
  $('.hideme').hide();
  $(this).removeClass('hide-off');
  $(this).addClass('hide-on');
})

$(document).on('click', '.hide-on', function () {
  $('.hideme').show();
  $(this).removeClass('hide-on');
  $(this).addClass('hide-off');
})

0 commentaires

1
votes

avec javascript, vous pouvez facilement basculer la classe css.

<label class="switch">
<input type="checkbox">
<span class="slider round hide-off"></span>
</label>
<br><br>
<div class="hideme">
  Please hide me, but bring me back later ;-)
</div>

.hide{
display: none;
}

let cb = document.getElementsByTagName("input");
cb[0].addEventListener("click",function(e) { 
        let myDivs = document.getElementsByClassName("hideme");
        myDivs[0].classList.toggle("hide");
    });

0 commentaires