Donc, j'ai un div coulissant qui peut être ouvert et fermé sur un bouton. Mais je veux qu'il se ferme lorsque vous vous en éloignez. Alors ouvrez sur un bouton, fermez quand un utilisateur clique ailleurs.

Comment puis-je y parvenir avec ce code?

$(document).ready(function() {
  var slider_width = $('.slider').width();
  $('#slider-button').click(function() {
    if($(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated')) {
      $('.slider,#slider-button').animate({"margin-right": '-='+slider_width});
    }
    else {
      if(!$(this).is(':animated')) {
        $('.slider,#slider-button').animate({"margin-right": '+='+slider_width});
      }
    }
  });
});
.slider{
    position:fixed;
    height:100%;
    background:yellow;
    width:200px;
    right:0px;
    margin-right: -200px;
}
#slider-button{
    position:fixed;
    width:100px;
    height:50px;
    right:0px;
    background: red;
    top:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="slider"></div>
<button id="slider-button"></button>

Veuillez être aussi détaillé que possible, j'apprends toujours cela et je suis facilement confus.

Je vous remercie!

0
Retros 1 mai 2017 à 17:18

3 réponses

Meilleure réponse

J'ai conçu une méthode utilisant une propriété de chaque événement appelée path. Vous pouvez voir la réponse originale que j'ai publiée sur ici. Fondamentalement, c'est une "liste ordonnée statique de tous ses ancêtres dans l'ordre arborescent" et mon code vérifie si un élément y est présent sinon fait un ensemble de code, cache un menu dans votre cas. Dans votre cas, il vérifie deux éléments car le bouton ne se trouve pas dans le conteneur de menu. Tout clic sur un élément dans le conteneur de menu ne fermera pas le menu car son event.path contient le conteneur tel qu'il se propage jusqu'à window.

var slider_width = $('.slider').width();
$('#slider-button').click(function() {
  if ($(this).css("margin-right") == slider_width + "px" && !$(this).is(':animated')) {
    $('.slider,#slider-button').animate({
      "margin-right": '-=' + slider_width
    });
  } else {
    if (!$(this).is(':animated')) {
      $('.slider,#slider-button').animate({
        "margin-right": '+=' + slider_width
      });
    }
  }
});

$("body").click(function() {
  target1 = $(".slider")[0];
  target2 = $("#slider-button")[0];
  flag = event.path.some(function(el) {
    return (el == target1 || el == target2)
  });
  if (!flag) {
    if ($(".slider").css("margin-right") != "-200px") {
      $('.slider,#slider-button').animate({
        "margin-right": '-=' + slider_width
      });
    }
  }
});
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.slider {
  position: fixed;
  height: 100%;
  background: yellow;
  width: 200px;
  right: 0px;
  margin-right: -200px;
}

#slider-button {
  position: fixed;
  width: 100px;
  height: 50px;
  right: 0px;
  background: red;
  top: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider"></div>
<button id="slider-button"></button>

: Comment détecter un clic en dehors d'un élément ?

1
Community 23 mai 2017 à 11:54

S'il te plaît, vérifie cela. Si votre curseur est ouvert et que vous cliquez n'importe où, il se fermera. Si votre curseur est ouvert, Number($('#slider-button').css("margin-right").replace('px','')) donnera la valeur de margin-right et celle-ci doit être supérieure à > 0.

$(document).ready(function() {
  var slider_width = $('.slider').width();
  $('#slider-button').click(function() {
    if($(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated')) {
      $('.slider,#slider-button').animate({"margin-right": '-='+slider_width});
    }
    else {
      if(!$(this).is(':animated')) {
        $('.slider,#slider-button').animate({"margin-right": '+='+slider_width});
      }
    }
  });
  
  $(document).click(function(){
    if(Number($('#slider-button').css("margin-right").replace('px',''))>0){
      $('#slider-button').click();
    }
  });
});
.slider{
    position:fixed;
    height:100%;
    background:yellow;
    width:200px;
    right:0px;
    margin-right: -200px;
}
#slider-button{
    position:fixed;
    width:100px;
    height:50px;
    right:0px;
    background: red;
    top:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="slider"></div>
<button id="slider-button"></button>
1
csharpbd 1 mai 2017 à 14:38
$(document).mouseup(function (e)
{
    var container = $("#slider-button");
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});
0
R. Oosterholt 1 mai 2017 à 18:56