How to avoid toggleClass method propagation in click event

Question

How to avoid toggleClass method propagation in click event

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

In the code below I have two toggleClass (they are in total 12) that are working properly, however I need it to be expanded only 1 , ie if I expand the primeiro and then the second, immediately primeiro must be suppressed. At the moment, this does not happen. Run the code below and click the "+" :

// when DOM is ready
$(document).ready(function() {
		
	mapItems = $("div.map").find("div img.mapItem");
	
	var tempItem;

	for(var i = 0; i < mapItems.length; i++){
		
		tempItem = mapItems[i];
		
		$(tempItem).click(function($e){

			//Evita o scroll mudar com o click
		    $e.preventDefault();
			$e.stopPropagation();

		    //Obtendo valor do data-desc
		    var desc = $("#" + $(this).attr('id') + "-desc").attr("data-desc");
			var modals = $("#" + $(this).attr('id') + "-desc").attr("data-modals");
			titulodata = $("#" + $(this).attr('id') + "-desc").attr("data-titulocarrossel");
			desccarrossel = $("#" + $(this).attr('id') + "-desc").attr("data-desccarrossel");
		    //Adcionando descrição
			$("#" + $(this).attr('id') + "-desc").html('<p class="descs ' + modals + ' ">'+desc+'</p>'); 
		
		    //Criando a função toggle para a utilização da class modal-celebration(balão)
		    $("#" + $(this).attr('id') + "-desc").toggleClass("modal-celebration " + modals); 

		    //Obtendo o boolean
		    var isVisible = $("#" + $(this).attr('id') + "-desc").is( ":visible" );
		    var isHidden = $("#" + $(this).attr('id') + "-desc").is( ":hidden" );			
						
			//Verificando estado				
			if (isVisible) {
				$(".borda").delay(700).fadeIn(500);
				$("#selectLocation").stop().fadeOut(500);
				$("#galleryContainer").stop().fadeOut(200, onHideGalleryComplete);

			}else{
				$(".borda").delay(700).fadeOut(500);
				$("#galleryContainer").stop().fadeOut(200);
				$("#selectLocation").stop().fadeIn(500);
			}

			//rotacionando
		 	$(this).toggleClass("down"); 
		
		});
	
		
		$(tempItem).click(function(){
		

			TituloEmprendimento = '<h3>' + titulodata +'</h3><p class="desc-carrossel">'+ desccarrossel +'</p>';		
		
			
		});
	};
	
})

function onHideGalleryComplete(){
	loadXMLEntries();
}

body{
		margin: 0;
		padding: 0;
		background-color:#fff;
	}

	/*** main layout ***/

	.main{
		display:block;
		position:relative;
		
		width: 810px;
		height: 1160px;
		
		overflow:hidden;
	}

	.preloader{
		display:block;
		position:absolute;
		
		width: 810px;
		height: 1160px;
		top: 0;
		left: 0;
		
		background-color:#000;
	}
	.preloaderImg{
		display:block;
		position:absolute;
		
		width: 100px;
		height: 44px;
		top: 40%;
		left: 50%;
		margin-left: -50px;
		margin-top: -55px;
	}


	@font-face {
	    font-family: 'Century_Gothic';
	    src: url('../font/Century_Gothic.ttf') format('truetype');
	}

	@font-face {
	    font-family: 'Century_Gothic_BOLD';
	    src: url('../font/Century_Gothic_BOLD.ttf') format('truetype');
	}

	@font-face {
	  font-family: 'Helvetica';
	  src: url('../font/Helvetica.ttf') format('truetype');
	}

	.lote p{
		font-family: 'Helvetica', Arial!important;
	}

	h3 {
	    font-size: 24px;
	    font-family: 'Century_Gothic', sans-serif!important;
	    color: #fff!important;
	}


	.map{
		display:block;
		width: 810px;
		height: 760px;
		
		background-image:url(../img/map-bg2.jpg);
		
	}

	.logo{
	    position: absolute;
	    width: 100%;
	    text-align: center;
	    margin: 68px auto;
		
	}

	.logo h1{
	    width: 730px;
	    margin: -13px auto;
	    font-size: 55px;
	    font-weight: bold;
	}

	.tagline{
		display:none;
		position:absolute;
		
		width: 354px;
		height: 41px;
		margin-left: -183px;
		left: 50%;
		top: 130px;
	}

	.galleryBox{
		background: url(../img/bg-galeria.jpg);
		position:absolute;
		display:none;
		left: 0%;
		top: 760px;
		
		width: 810px;
		height: 300px;
		
		padding:0;
		margin:0;
	}

	.galleryName{
		display: block;
		position: absolute;
		width: 689px;
		left: 37px;
		text-align: left;
		top: -3px;
	}


	.selectLocation{
	    position: absolute;
	    display: none;
	    left: 0%;
	    top: 760px;
	    width: 810px;
	    height: 300px;
	    padding: 0;
	    margin: 0;
	}

	.footer{
		background-image:url(../img/footer-bg.png);
		display:none;
		position:absolute;
		width: 810px;
		height: 100px;
		top: 1060px;
	    background-repeat: no-repeat;
	}

	.celebration{
	    position: absolute;
	    width: 160px;
	    height: 97px;
	    left: 84%;
	    top: -17px;
	}


	.instagramFollow{
	    position: absolute;
	    width: 162px;
	    height: 95px;
	    left: 36px;
	    top: 14px;
	}

	/*** gallery stuff ***/

	#galleryContainer {
		position:relative;
		left:0px;
		top:0px;
		width:100%;
		height:100%;
	}

	#galleryTopContainer {
		width: 728px;
		margin: 0 auto;
		height: 300px;
		overflow: hidden;
	}

	.galleryPictureList {
		position:relative;
		left:0px;
		width:0px;
	}

	.galleryPictureItem {
	    display: inline-block;
	    zoom: 1;
	}

	.galleryBoxPicture{
		    margin-top: 102px;
		    width: 240px;
		    margin-left: 4px;
		    height: 177px;

	}
	.galleryBoxDescription{
		font-family:Arial, Helvetica, sans-serif;
		font-size: 12px;
		position:absolute;
		bottom: 0px;
		display:none;		
		width: 44px;
		height: 50px;		
		margin-left: 30px;
		margin-bottom: 10px;			
		background-color:rgba(0,0,0,0.6);		
		color:#DDD;
		padding:5px;
	}

	.galleryArrowBtn {
		position:absolute;		
		width:66px;
		height: 100%;
		background-repeat:no-repeat;
	}

	.galleryArrowBtn:hover {
		background-position:-66px 0px;
	}

	.galleryArrowLeft {		
		visibility:hidden;		
		left: 41px;
   		top: 102px;
		background-image:url(../img/arrowLeft.png);
	}

	.galleryArrowRight {		
		visibility:hidden;
		left: 724px;
    	top: 102px;
		background-image:url(../img/arrowRight.png);
	}

	/*** other ***/

	.mapItem{
		display:block;
		position:absolute;
		cursor: pointer;
		cursor: hand;	
		background-repeat:no-repeat;
		background-position: 0 0;
	}

	.mapLabel{	
		display:block;
		position:absolute;
		background-repeat:no-repeat;
		background-position: 0 0;
		width: 250px;
		height: 100px;
	}
	.mapDesc{
		display:block;
		position:absolute;
		background-repeat:no-repeat;
		background-position: 0 0;
		width: 256px;
	    height: 106px;
	}

	

	
	/*** PORTICO ***/

	#z-in-portico-build{
	    z-index: 1!important;
		position: relative;
		right: 433px;
        top: -99px;
		width: 1px;
	}


	#portico-build{
		z-index: 1!important;
		left: 495px;
		top: 180px;

	}

	#portico-build-desc{
		display:none;
		background-image:url(../img/descriptions/descri.png);
		left: 483px;
		top: 55px;
	}

	#portico-build-img{
		right: -447px;
		top: 181px;
		position: relative;
		z-index: -2;
	}



	/*** CASA ***/

	#z-in-casa-build{
        z-index: 0!important;
		position: relative;
		right: 98px;
		top: 8px;
		width: 1px;
	}


	#casa-build{
		z-index: 1!important;
		left: 547px;
   		top: 31px;

	}

	#casa-build-desc{
		display:none;
		background-image:url(../img/descriptions/descri.png);
		left: 533px;
    	top: -97px;
	}

	#casa-build-img{
		right: -496px;
    	top: 32px;
		position: relative;
		z-index: -2;
	}
    

	
		/*** STREET ***/

	#z-in-street-park-build{
        z-index: 0!important;
		position: relative;
		right: 344px;
        top: -59px;
		width: 1px;
	}


	#street-park-build{
		z-index: 1!important;
	    left: 557px;
	    top: 142px;

	}

	#street-park-build-desc{
		display:none;
		background-image:url(../img/descriptions/descri.png);
		left: 533px;
    	top: 8px;
	}

	#street-park-build-img{
    right: -509px;
    top: 150px;
    position: relative;
    z-index: -2;
	}




	/*** POR GERAL***/	


	#z-in-portico-geral-build{
		z-index: 0!important;
		position: relative;
		right: 280px;
		top: 141px;
		width: 1px;
	}


	#portico-geral-build{
		z-index: 1!important;
		left: 547px;
   		top: 31px;

	}

	#portico-geral-build-desc{
		display:none;
		background-image:url(../img/descriptions/descri.png);
		left: 533px;
    	top: -97px;
	}

	#portico-geral-build-img{
		right: -496px;
    	top: 32px;
		position: relative;
		z-index: -2;
	}



/* ----------------------------------------*/

	.redes{ 
		width: 387px;
	    float: left;
	    color: #fff;
	}

	.redes ul{ width: 200px; }

	.redes ul li{  
		width: 25px;
	    float: left;
	    margin-left: 16px;
	    margin-top: 21px;
	}

	.lote{
		width: 645px;
		float: left;
		color: #fff;
		font-size: 7px;
		text-align: left;
		position: relative;
		top: -8px;
	}
    

   p.p-top{
    font-size: 15px;
    margin: 0 0 10px;
    color: #fff;
    float: right;
    position: relative;
    left: -43px;
    top: 192px;
    width: 280px;
    text-align: right;
   }

   p.p-bot{
	font-size: 15px;
    margin: 0 0 10px;
    color: #fff;
    float: right;
    position: relative;
    left: 238px;
    top: 209px;
    width: 280px;
    text-align: right;
   }

   p {    	
	   	font-family: 'Century_Gothic', 
	   	sans-serif; color: #fff; 
    }

   .redes p {font-family: 'Century_Gothic_BOLD', sans-serif;   }


	.rotate{
	    -moz-transition: all 2s linear;
	    -webkit-transition: all 2s linear;
	    transition: all 0.5s linear;
	}


	.rotate.down{
	    -moz-transform:rotate(225deg);
	    -webkit-transform:rotate(225deg);
	    transform:rotate(225deg);
	}

	@-webkit-keyframes overlayfx {
	   0% { -webkit-transform: scale(.8); opacity: 0; }
	   100%   { -webkit-transform: scale(1.1); opacity: 1;  z-index: 1; }
	}
	@-moz-keyframes  overlayfx {
	   0% { -moz-transform: scale(.8); opacity: 0; }
	   100%   { -moz-transform: scale(1.1); opacity: 1;  z-index: 1;  }
	}
	@keyframes overlayfx {
	   0% { transform: scale(.8); opacity: 0; }
	   100%   { transform: scale(1.1); opacity: 1;  z-index: 1;  }
	}


	.modal-celebration {
	  display: block!important;
	  width: 158px;
	  height: 158px;
	  position: absolute;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  opacity: 0;
	  -webkit-transform: scale(.8);
	  -webkit-animation: overlayfx 0.3s linear 0.1s 1 forwards;  
	  -moz-transform: scale(.8);
	  -moz-animation: overlayfx 0.3s linear 0.1s 1 forwards;  
	  transform: scale(.8);
	  animation: overlayfx 0.3s linear 0.1s 1 forwards;

	}

p.descs.portico-build {
    font-weight: bold;
    color: #2B467D;
    position: relative;
    top: 72px;
    left: -49px;
    text-align: center;
    width: 156px;
    font-size: 15px;
}



p.descs.street-park-build {
    font-weight: bold;
    color: #2B467D;
    position: relative;
    top: 68px;
    left: -32px;
    text-align: center;
    width: 148px;
    font-size: 15px;
}

<div class="main">
	<div id="map" class="map">
		
        
        <!-- LOCAIS -->
        
         <div id="z-in-portico-build">
             <div class="mapDesc" data-titulocarrossel="LOCAL1" data-desccarrossel="LOCAL1" data-desc="LOCAL1" data-modals="portico-build" id="portico-build-desc" style="display: none;"></div>
            
            <a href="#"><img src="https://ssl-177586.kinghost.net/tab-face/celebrationville/pin.png"class="mapItem itemDefault rotate" id="portico-build"/></a>
          
        </div>

       
        <div id="z-in-street-park-build">
        <div class="mapDesc" data-titulocarrossel="LOCAL2" data-desccarrossel="LOCAL2" data-desc="LOCAL2" data-modals="street-park-build" id="street-park-build-desc" style="display: none;"></div>
            
            <a href="#"><img src="https://ssl-177586.kinghost.net/tab-face/celebrationville/pin.png"class="mapItem itemDefault rotate" id="street-park-build"/></a>
           
        </div>

       
</div>

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

html jquery

asked by anonymous 15.02.2016 / 21:21

2 answers

Elastic scroll effect in mobile applications Pan Image js and css with "mascara" on top

score 0 · Answer 1

Follow the solution to do what you want.

$(document).ready(function() {

  var $descritions = $('div[id*="z-in-"] .mapDesc');
  var $buttons = $('div[id*="z-in-"] a');
  var $rotates = $('img.rotate');
  var toggleClasses = 'modal-celebration portico-build';

  $buttons.on('click', function($e) {

    //Evita o scroll mudar com o click
    $e.preventDefault();
    $e.stopPropagation();
    
    var $self = $(this);
    var $prev = $self.prev();
    var $current = $prev.is('.modal-celebration.portico-build');

    //Obtendo valor do data-desc
    var desc = $prev.data("desc");
    var modals = $prev.data("modals");
    var titulodata = $prev.data("titulocarrossel");
    var desccarrossel = $prev.data("desccarrossel");
      
    //Adcionando descrição
    $prev.html('<p class="descs ' + modals + ' ">' + desc + '</p>');
        
    //Criando a função toggle para a utilização da class modal-celebration(balão)
    $prev.toggleClass("modal-celebration " + modals);
    
    //Verificando estado
    if ($current) {
        $(".borda").delay(700).fadeIn(500);
        $("#selectLocation").stop().fadeOut(500);
        $("#galleryContainer").stop().fadeOut(200, onHideGalleryComplete);

      } else {
        $(".borda").delay(700).fadeOut(500);
        $("#galleryContainer").stop().fadeOut(200);
        $("#selectLocation").stop().fadeIn(500);
      }
        
    $descritions.removeClass(toggleClasses);
    $rotates.removeClass("down");
    
    if (!$current) {
      $index = $self.index($buttons);
      $descritions.eq($index).addClass(toggleClasses);
      $self.find('img.rotate').addClass('down');
    }
         
  });

})

function onHideGalleryComplete() {
  loadXMLEntries();
}

.main,.preloader{width:810px;height:1160px}body{margin:0;padding:0;background-color:#fff}.main{display:block;position:relative;overflow:hidden}.preloader,.preloaderImg{position:absolute;display:block}.preloader{top:0;left:0;background-color:#000}.preloaderImg{width:100px;height:44px;top:40%;left:50%;margin-left:-50px;margin-top:-55px}@font-face{font-family:Century_Gothic;src:url(../font/Century_Gothic.ttf) format('truetype')}@font-face{font-family:Century_Gothic_BOLD;src:url(../font/Century_Gothic_BOLD.ttf) format('truetype')}@font-face{font-family:Helvetica;src:url(../font/Helvetica.ttf) format('truetype')}.lote p{font-family:Helvetica,Arial!important}h3{font-size:24px;font-family:Century_Gothic,sans-serif!important;color:#fff!important}.map{display:block;width:810px;height:760px;background-image:url(../img/map-bg2.jpg)}.galleryBox,.tagline{display:none;position:absolute}.logo{position:absolute;width:100%;text-align:center;margin:68px auto}.logo h1{width:730px;margin:-13px auto;font-size:55px;font-weight:700}.tagline{width:354px;height:41px;margin-left:-183px;left:50%;top:130px}.galleryBox,.selectLocation{height:300px;padding:0;margin:0}.galleryBox{background:url(../img/bg-galeria.jpg);left:0;top:760px;width:810px}.footer,.galleryArrowBtn{background-repeat:no-repeat}.galleryName{display:block;position:absolute;width:689px;left:37px;text-align:left;top:-3px}.footer,.selectLocation{display:none;width:810px;position:absolute}.selectLocation{left:0;top:760px}.footer{background-image:url(../img/footer-bg.png);height:100px;top:1060px}.celebration{position:absolute;width:160px;height:97px;left:84%;top:-17px}.instagramFollow{position:absolute;width:162px;height:95px;left:36px;top:14px}#galleryContainer{position:relative;left:0;top:0;width:100%;height:100%}#galleryTopContainer{width:728px;margin:0 auto;height:300px;overflow:hidden}.galleryPictureList{position:relative;left:0;width:0}.galleryPictureItem{display:inline-block;zoom:1}.galleryBoxPicture{margin-top:102px;width:240px;margin-left:4px;height:177px}.galleryBoxDescription{font-family:Arial,Helvetica,sans-serif;font-size:12px;position:absolute;bottom:0;display:none;width:44px;height:50px;margin-left:30px;margin-bottom:10px;background-color:rgba(0,0,0,.6);color:#DDD;padding:5px}.galleryArrowBtn{position:absolute;width:66px;height:100%}.galleryArrowBtn:hover{background-position:-66px 0}.mapDesc,.mapItem,.mapLabel{display:block;position:absolute;background-repeat:no-repeat;background-position:0 0}.galleryArrowLeft{visibility:hidden;left:41px;top:102px;background-image:url(../img/arrowLeft.png)}.galleryArrowRight{visibility:hidden;left:724px;top:102px;background-image:url(../img/arrowRight.png)}.mapItem{cursor:pointer;cursor:hand}.mapLabel{width:250px;height:100px}.mapDesc{width:256px;height:106px}#casa-build-desc,#portico-build-desc,#portico-geral-build-desc,#street-park-build-desc{display:none;background-image:url(../img/descriptions/descri.png)}#z-in-portico-build{z-index:1!important;position:relative;right:433px;top:-99px;width:1px}#portico-build{z-index:1!important;left:495px;top:180px}#portico-build-desc{left:483px;top:55px}#portico-build-img{right:-447px;top:181px;position:relative;z-index:-2}#z-in-casa-build{z-index:0!important;position:relative;right:98px;top:8px;width:1px}#casa-build,#portico-geral-build{z-index:1!important;left:547px;top:31px}#casa-build-desc,#portico-geral-build-desc{left:533px;top:-97px}#casa-build-img,#portico-geral-build-img{right:-496px;top:32px;position:relative;z-index:-2}#z-in-street-park-build{z-index:0!important;position:relative;right:344px;top:-59px;width:1px}#street-park-build{z-index:1!important;left:557px;top:142px}#street-park-build-desc{left:533px;top:8px}#street-park-build-img{right:-509px;top:150px;position:relative;z-index:-2}#z-in-portico-geral-build{z-index:0!important;position:relative;right:280px;top:141px;width:1px}.redes{width:387px;float:left;color:#fff}.redes ul{width:200px}.redes ul li{width:25px;float:left;margin-left:16px;margin-top:21px}.lote{width:645px;float:left;color:#fff;font-size:7px;text-align:left;position:relative;top:-8px}p.p-bot,p.p-top{font-size:15px;margin:0 0 10px;float:right;position:relative;width:280px;text-align:right;color:#fff}p.p-top{left:-43px;top:192px}p.p-bot{left:238px;top:209px}p{font-family:Century_Gothic,sans-serif;color:#fff}.redes p{font-family:Century_Gothic_BOLD,sans-serif}.rotate{-moz-transition:all 2s linear;-webkit-transition:all 2s linear;transition:all .5s linear}.rotate.down{-moz-transform:rotate(225deg);-webkit-transform:rotate(225deg);transform:rotate(225deg)}@-webkit-keyframes overlayfx{0%{-webkit-transform:scale(.8);opacity:0}100%{-webkit-transform:scale(1.1);opacity:1;z-index:1}}@-moz-keyframes overlayfx{0%{-moz-transform:scale(.8);opacity:0}100%{-moz-transform:scale(1.1);opacity:1;z-index:1}}@keyframes overlayfx{0%{transform:scale(.8);opacity:0}100%{transform:scale(1.1);opacity:1;z-index:1}}.modal-celebration{display:block!important;width:158px;height:158px;position:absolute;top:0;left:0;bottom:0;opacity:0;-webkit-transform:scale(.8);-webkit-animation:overlayfx .3s linear .1s 1 forwards;-moz-transform:scale(.8);-moz-animation:overlayfx .3s linear .1s 1 forwards;transform:scale(.8);animation:overlayfx .3s linear .1s 1 forwards}p.descs.portico-build,p.descs.street-park-build{font-weight:700;color:#2B467D;position:relative;text-align:center;font-size:15px}p.descs.portico-build{top:72px;left:-49px;width:156px}p.descs.street-park-build{top:68px;left:-32px;width:148px}

<div class="main">
  <div id="map" class="map">
    <!-- LOCAIS -->
    <div id="z-in-portico-build">
      <div class="mapDesc" data-titulocarrossel="LOCAL1" data-desccarrossel="LOCAL1" data-desc="LOCAL1" data-modals="portico-build" id="portico-build-desc" style="display: none;"></div>
      <a href="#">
        <img src="https://ssl-177586.kinghost.net/tab-face/celebrationville/pin.png"class="mapItem itemDefault rotate" id="portico-build" />
      </a>
    </div>
    <div id="z-in-street-park-build">
      <div class="mapDesc" data-titulocarrossel="LOCAL2" data-desccarrossel="LOCAL2" data-desc="LOCAL2" data-modals="street-park-build" id="street-park-build-desc" style="display: none;"></div>
      <a href="#">
        <img src="https://ssl-177586.kinghost.net/tab-face/celebrationville/pin.png"class="mapItem itemDefault rotate" id="street-park-build" />
      </a>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

A hint every time you use a same selector of jQuery repeatedly, save the result of the selection to a variable because you prevent jQuery from scanning DOM for element too often.

score 0 · Answer 2

0

The not () method helped me solve the problem with the removeClass () that pass the selectors I need.

$(".mapDesc").not("#" + $(this).attr('id') + "-desc").removeClass("modal-celebration");

16.02.2016 / 00:23