Comment fermer un div étendu en cliquant à l'extérieur avec la fonction de clic d'appel pour un événement de fermeture

Question

Eh bien, il existe de nombreuses solutions pour ce type de problèmes ici. Mais, mon problème est que je ne suis pas autorisé à modifier les fonctionnalités existantes. La fonctionnalité existante est:

$('body').on('click', '.parent.normal', function () {
  // code for Expanding a div
});

Et

$('body').on('click', '.parent.expand', function () {
  // code for Closing expanded div
});

Ce que je peux faire, c'est définir une autre fonction click pour cliquer en dehors du div étendu qui appellera l'événement de clic existant pour fermer le div étendu. Pour ce faire, j'ai écrit ceci:

  if($('.parent.expand').length > 0) {
    $('div:not(".parent.normal, .expanded-content, .expanded-content > div")').click(function () {
      $('.parent.expand').click();
    });
  }

Ce qui ne fonctionne pas réellement. Comment puis-je le faire fonctionner?

Démo de violon

javascript jquery

0

user1896653 7 mars 2016 à 19:26

Answer 1

L'ajout de cela à votre code existant doit résoudre le problème.

$(document).on('click',function(e){   
  if (!$(e.target).parents('.content').length > 0){
     $('.parent.expand').click();
  }
});

Voici un violon fonctionnel

1

Rajshekar Reddy 7 mars 2016 à 17:45

Answer 2

Cela le fera sans apporter de modifications aux fonctions existantes:

$(document).mouseup(function (e) {

   var elem_not = $(".parent.normal, .parent.expand, .expanded-content, .expanded-content > div");

   if (!elem_not.is(e.target) && elem_not.has(e.target).length === 0) {
       $('.parent.expand').click();
   }

});

Mise à jour de votre FIDDLE

1

Chris 7 mars 2016 à 17:30

Answer 3

Vous devez modifier votre CSS pour que votre corps ait 100% de largeur et 100% de hauteur. Cela créera une zone pour vos événements de clic à enregistrer en dehors de la div.

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

Et puis utilisez ce javascript:

// open expand content
$('body').on('click', '.parent.normal', function (e) {
  e.stopPropagation();
  e.preventDefault();
  $(this).removeClass('normal');
  $(this).addClass('expand');
  $(this).parent().find('.expanded-content').slideDown(300);
});

// close expand content
$('body').on('click', '.parent.expand', function (e) {
  e.stopPropagation();
  e.preventDefault();
  $(this).removeClass('expand');
  $(this).addClass('normal');
  $(this).parent().find('.expanded-content').slideUp(300);
});

$('body').on('click', function (e) {
  e.stopPropagation();
  e.preventDefault();
  $('.parent.expand').click();
});

Démo de violon

0

bastos.sergio 7 mars 2016 à 17:20

Comment fermer un div étendu en cliquant à l'extérieur avec la fonction de clic d'appel pour un événement de fermeture

3 réponses

Questions connexes

De nouvelles questions

javascript