How to do nothing when clicking the same div # box1?

Question

How to do nothing when clicking the same div # box1?

Navigation

#1 by (1 votes)

0

I want when I click on the id box1 div 2 times or more do nothing using Jquery and / or javascript

$(document).ready(function(){
			var exe=false;
			var nuns=0;
			$('div#box1').on("click", function(){
				if(nuns==0){
					if(exe!=false){ exe.hide('fast');  }
					exe = $(this).children('#submenu');
					$(this).children('#submenu').slideToggle('fast');
					nuns=1;
				}else{
					exe.hide('fast');
					exe = $(this).children('#submenu');
					$(this).children('#submenu').slideToggle('fast');
					nuns=0;
				}
			});
		});

div#box1{
		border: 1px solid rgba(155,243,253,0.5);
		border-radius: 5px;
		/*	background: rgba(246,185,181,0.23); */
		background: rgba(25, 136, 196, 0.28) none repeat scroll 0 0;
		padding: 5px 1px 1px 5px;
		margin: 5px;
	}
	div#box1 p{ font-size:12pt; padding: 1px; }
	div#box1 h2 { border: 1px solid black;	border-radius: 5px;	padding: 1px 0px 1px 12px; 
		background: rgba(100,100,100,.1);
	}
	img#img_del {position: relative;top: -45px;left: -12px; }
	#submenu { display: none; }

<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.3.1.js"></script><scripttype="text/javascript">
		
	</script>
	<style type="text/css">
	</style>
</head>
<body>
<div class="text-left" id="box1">
	<div id="box2"> 
		<a onclick="">
			<h2>oi</h2>
		</a>
		<a href="#4321">
			<img id="img_del" align="right" src="/img/close.jpg">
		</a>
	</div>
	<div id="submenu">
		<h3><p>Pontos:500</p></h3>
		<h3><p>undefined</p></h3>
	</div>
</div>
<div class="text-left" id="box1">
	<div id="box2"> 
		<a onclick="">
			<h2>oi</h2>
		</a>
		<a href="#4321">
			<img id="img_del" align="right" src="/img/close.jpg">
		</a>
	</div>
	<div id="submenu">
		<h3><p>Pontos:500</p></h3>
		<h3><p>undefined</p></h3>
	</div>
</div>
<div class="text-left" id="box1">
	<div id="box2"> 
		<a onclick="">
			<h2>oi</h2>
		</a>
		<a href="#4321">
			<img id="img_del" align="right" src="/img/close.jpg">
		</a>
	</div>
	<div id="submenu">
		<h3><p>Pontos:500</p></h3>
		<h3><p>undefined</p></h3>
	</div>
</div>
<div class="text-left" id="box1">
	<div id="box2"> 
		<a onclick="">
			<h2>oi</h2>
		</a>
		<a href="#4321">
			<img id="img_del" align="right" src="/img/close.jpg">
		</a>
	</div>
	<div id="submenu">
		<h3><p>Pontos:500</p></h3>
		<h3><p>undefined</p></h3>
	</div>
</div>
<body>
<html>

javascript jquery

asked by anonymous 02.07.2018 / 10:58

1 answer

Get JS Variable value and pass to PHP and send by URL Nodejs - socket.io and jquery

score 1 · Answer 1

Your code needs some corrections

The use of id does not have a duplicate, should user the class attribute:

The animation is not perfect, it should close and open the submenu properly, should use: $(this).children('#submenu').animate({"margin-top":"0px"});

Here's the code with my solution

<html lang="en">
   <head>
      <meta charset="UTF-8">
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script><scripttype="text/javascript">
         $(document).ready(function(){
            var exe=false;
            var nuns=0;
            $('.box1').on("click", function(){
                if(nuns==0){
                    if(exe!=false){ exe.hide('fast');  }
                    exe = $(this).children('#submenu');
                    $(this).children('#submenu').slideToggle('fast');
                    nuns=1;
                }else{
                //Commente este trecho do **else** para não haver repetição caso seja este o objectivo.
                exe.hide('fast');
                exe = $(this).children('#submenu');
                $(this).children('#submenu').animate({"margin-top":"0px"});
                nuns=0;
            }
        });
     });
  </script>
  <style type="text/css">
     .box1{
     border: 1px solid rgba(155,243,253,0.5);
     border-radius: 5px;
     /* background: rgba(246,185,181,0.23); */
     background: rgba(25, 136, 196, 0.28) none repeat scroll 0 0;
     padding: 5px 1px 1px 5px;
     margin: 5px;
     }
     .box1 p{ font-size:12pt; padding: 1px; }
     .box1 h2 { border: 1px solid black;    border-radius: 5px; padding: 1px 0px 1px 12px; 
     background: rgba(100,100,100,.1);
     }
     img#img_del {position: relative;top: -45px;left: -12px; }
     #submenu { display: none; }
  </style>


</head>
   <body>
      <div class="box1">
         <div id="box2">
            <a onclick="">
               <h2>oi</h2>
            </a>
            <a href="#4321">
            <img id="img_del" align="right" src="/img/close.jpg">
            </a>
         </div>
         <div id="submenu">
            <h3>
               <p>Pontos:500</p>
            </h3>
            <h3>
               <p>undefined</p>
            </h3>
         </div>
      </div>
      <div class="box1">
         <div id="box2">
            <a onclick="">
               <h2>oi</h2>
            </a>
            <a href="#4321">
            <img id="img_del" align="right" src="/img/close.jpg">
            </a>
         </div>
         <div id="submenu">
            <h3>
               <p>Pontos:500</p>
            </h3>
            <h3>
               <p>undefined</p>
            </h3>
         </div>
      </div>
      <div class="box1">
         <div id="box2">
            <a onclick="">
               <h2>oi</h2>
            </a>
            <a href="#4321">
            <img id="img_del" align="right" src="/img/close.jpg">
            </a>
         </div>
         <div id="submenu">
            <h3>
               <p>Pontos:500</p>
            </h3>
            <h3>
               <p>undefined</p>
            </h3>
         </div>
      </div>
   </body>
</html>