How do you do nothing when you click on the same div#box1?

Asked

Viewed 123 times

0

I want when clicking on the div id box1 2x or more to 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>
	<script type="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

  • I squeezed myself wrong. The right thing is: -Whenever you click on the submenu it is not to trigger the jquery event.

  • someone help ae

1 answer

1

Your code needs some corrections

  1. The use of id not duplicate pos, must user the attribute class:
  2. The animation is not perfect, you must close and open the submenu properly, must 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>
      <script type="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>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.