Problems when closing pull-down by clicking [closed]

Question

Problems when closing pull-down by clicking [closed]

Navigation

#1 by (3 votes)

0

the first title shows and hides the other three. Click on the first title and show the other three ... first title disappeared. help help me.

$(document).ready(function(){

	$(".menu_item:nth-child(2)").hide();
	$(".menu_item:nth-child(3)").hide();
	$(".menu_item:nth-child(4)").hide();

	$('.menu_item').click(function() { 
		$(".menu_item").slideToggle();
	});
	
});

a {
  text-decoration: none;
  color: #000;
}

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

  <div class="menu_item">
    <h3><a href="#"> Sesión demo 1</a></h3> 
  </div>
  
  <div class="menu_item">
    <h3><a href="#"> Sesión demo 2</a></h3> 
  </div>
  
  <div class="menu_item">
    <h3><a href="#"> Sesión demo 3</a></h3> 
  </div>
  
  <div class="menu_item">
    <h3><a href="#"> Sesión demo 4</a></h3> 
  </div>
  
</div>

jquery

asked by Diego Sagredo 09.03.2017 в 14:15

source

1 answer

Input type number teased How can I do in javascript a program that seems simple in Java? [closed]

score 3 · Accepted Answer

Edit: Secondly, I understood that the first title shows or hides the other three each time you click.

Initially, items 2,3 and 4 must be hidden.

What you should do is assign the event handler click to the first element only. And within it, execute slideToggle only in the other three:

$(document).ready(function(){

	$(".menu_item:nth-child(2)").hide();
	$(".menu_item:nth-child(3)").hide();
	$(".menu_item:nth-child(4)").hide();

	$(".menu_item:nth-child(1)").click(function() { 
	   $(".menu_item:nth-child(2)").slideToggle();
	   $(".menu_item:nth-child(3)").slideToggle();
	   $(".menu_item:nth-child(4)").slideToggle();
	});
	
});

a {
  text-decoration: none;
  color: #000;
}

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

  <div class="menu_item">
    <h3><a href="#"> Sesión demo 1</a></h3> 
  </div>
  
  <div class="menu_item">
    <h3><a href="#"> Sesión demo 2</a></h3> 
  </div>
  
  <div class="menu_item">
    <h3><a href="#"> Sesión demo 3</a></h3>
  </div>
  
  <div class="menu_item">
    <h3><a href="#"> Sesión demo 4</a></h3> 
  </div>
  
</div>