Rotate Element on Click

Question

Well I am with 1 problem, I am using the accordion of jquery that when clicking on a list, it expands and shows all the information, associated to this "project".

My problem and q I have an arrow to show q the list expands, and when the list is expanded, the arrow rotates and is face up, the problem and when I click on the elements of that expanded list the arrow goes back to do the Rotate.

But me with text, maybe I can’t explain the problem well, so I was able to reproduce the problem in Jsfiddle

https://jsfiddle.net/jzneur48/3/

Link code

$(function(){
  $("#projeto_1").click(function(){
    console.log("#rotate_1");
    $("#rotate_1").toggleClass("rotate");
  });
});

$(document).ready(function(){
		$("#nav > li > a").on("click", function(e){
			if($(this).parent().has("ul")) {
			  e.preventDefault();
			}
			
			if(!$(this).hasClass("open")) {
				
				$(this).next("ul").slideDown(350);
				$(this).addClass("open");
				
			}else if($(this).hasClass("open")) {
				$(this).removeClass("open");
				$(this).next("ul").slideUp(350);
			}
		});
		
	});
  
									

.rotate{
	transform: rotate(180deg);
    margin-top: 7px;
}

#nav {
  display: block;
  width: 280px;
  margin: 0 auto;
  -webkit-box-shadow: 3px 2px 3px rgba(0,0,0,0.7);
  -moz-box-shadow: 3px 2px 3px rgba(0,0,0,0.7);
  box-shadow: 3px 2px 3px rgba(0,0,0,0.7);
}
 
#nav > li > a {
  display: block;
  padding: 5px 18px;
  font-size: 18px;
  font-weight: bold;
  color: #14597C;
  text-decoration: none;
  border-bottom: 1px solid white;
  background-color: #D0DBE5;
}
#nav > li > a:hover, #nav > li > a.open {
    color: #e9e9e9;
    border-bottom-color: #384f76;
    background-color: #14597c;
}

#nav li ul { display: none; background: #4a5b78; }
 
#nav li ul li a {
  display: block;
  background: none;
  padding: 10px 0px;
  padding-left: 30px;
  font-size: 1.1em;
  text-decoration: none;
  font-weight: bold;
  color: #e3e7f1;
  text-shadow: 1px 1px 0px #000;
}
#nav li ul li a:hover {
  background: #394963;
}

<script src="/js/scriptbreaker-multiple-accordion-1.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<ul style="padding: 0;list-style-type: none; width:100%" id="nav">
  <li class="ui-state-default" ordem="<?=$i+1?>" id="projeto_1"> 
    <a style="text-align: left;" href="#">
				<b> Projeto 1 (Apenas ao clicar aqui, é que a seta deveria de alterar ) </b>
				<i id="rotate_1" style="float:right" class="fa fa-arrow-down" aria-hidden="true"></i>			 		
     </a>
    <ul style="padding: 0;">
      <p style="height:50px; margin:0">
        Teste (Ao clicar aqui a seta nao devia de altarer, nao deveria de fazer o rotate )
      </p>
    </ul>
    
	</li>
 </ul>
 

Answer 1

Your selector $("#projeto_1").click(function(){ is wrong. Vc pos event click on LI whole, and has to be on the link within the LI.

it should be like this $("#projeto_1 > a").click(function(){ and it will work

Code of the image above

$(function(){
  $("#projeto_1 a").click(function(){
    console.log("#rotate_1");
    $("#rotate_1").toggleClass("rotate");
  });
});

$(document).ready(function(){
		$("#nav > li > a").on("click", function(e){
			if($(this).parent().has("ul")) {
			  e.preventDefault();
			}
			
			if(!$(this).hasClass("open")) {
				
				$(this).next("ul").slideDown(350);
				$(this).addClass("open");
				
			}else if($(this).hasClass("open")) {
				$(this).removeClass("open");
				$(this).next("ul").slideUp(350);
			}
		});
		
	});

.rotate{
	transform: rotate(180deg);
    margin-top: 7px;
}

#nav {
  display: block;
  width: 280px;
  margin: 0 auto;
  -webkit-box-shadow: 3px 2px 3px rgba(0,0,0,0.7);
  -moz-box-shadow: 3px 2px 3px rgba(0,0,0,0.7);
  box-shadow: 3px 2px 3px rgba(0,0,0,0.7);
}
 
#nav > li > a {
  display: block;
  padding: 5px 18px;
  font-size: 18px;
  font-weight: bold;
  color: #14597C;
  text-decoration: none;
  border-bottom: 1px solid white;
  background-color: #D0DBE5;
}
#nav > li > a:hover, #nav > li > a.open {
    color: #e9e9e9;
    border-bottom-color: #384f76;
    background-color: #14597c;
}

#nav li ul { display: none; background: #4a5b78; }
 
#nav li ul li a {
  display: block;
  background: none;
  padding: 10px 0px;
  padding-left: 30px;
  font-size: 1.1em;
  text-decoration: none;
  font-weight: bold;
  color: #e3e7f1;
  text-shadow: 1px 1px 0px #000;
}
#nav li ul li a:hover {
  background: #394963;
}

<script src="/js/scriptbreaker-multiple-accordion-1.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<ul style="padding: 0;list-style-type: none; width:100%" id="nav">
  <li class="ui-state-default" ordem="<?=$i+1?>" id="projeto_1"> 
    <a style="text-align: left;" href="#">
				<b> Projeto 1 (Apenas ao clicar aqui, é que a seta deveria de alterar ) </b>
				<i id="rotate_1" style="float:right" class="fa fa-arrow-down" aria-hidden="true"></i>			 		
     </a>
    <ul style="padding: 0;">
      <p style="height:50px; margin:0">
        Teste (Ao clicar aqui a seta nao devia de altarer, nao deveria de fazer o rotate )
      </p>
    </ul>
    
	</li>
 </ul>