user3386779 user3386779 - 4 months ago 18
jQuery Question

slideToggle for popup menu

I want to slide the popup menu and add rotate class by using 'this' variable.Now rotate class append successfully.But I also need to slide the popupMenu ul.



$("[class*='popup']").click(function(){
$(this).find('span.glyphicon').toggleClass('rotate');
$(this).find("[class='poper']").slideToggle();
})

.rotate {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.popupMenu1,.popupMenu2,.popupMenu3{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<p class="popup1"><span class="glyphicon glyphicon-triangle-right" id="arrow1"></span>Services
<ul class="poper popupMenu1">
<li><a href="#">Product Engineering</a></li>
<li><a href="#">Enterprise Solutions</a></li>
<li><a href="#">Independent Testing Services</a></li>
<li><a href="#">Digital Transformation</a></li>
<li><a href="#">Infrastructure &amp; Application Support</a></li>
<li><a href="#">Business Intelligence</a></li>
<li><a href="#">Oracle Applications</a></li>
<li><a href="#">Big Data Analytic</a></li>
</ul></p>
<p class="popup2" ><span class="glyphicon glyphicon-triangle-right" id="arrow2"></span>Solutions
<ul class="poper popupMenu2">
<li>
<a href="#">Auras</a>
<br>
<a href="#">Tapshop</a>
<br>
<a href="#">Temenos AFIS</a>
<br>
</li>
<li>
<a href="#">MPoS</a>
<br>
<a href="#">Techcello</a>
<br>
</li>
</ul></p>
<p class="popup3"><span class="glyphicon glyphicon-triangle-right" id="arrow3"></span>Industries
<ul class="poper popupMenu3">
<li>
<a href="#">Independent Software Vendors</a>
<br>
<a href="#">Healthcare</a>
<br>
</li>
<li>
<a href="#">Retail</a>
<br>
<a href="#">Education</a>
<br>
</li>
<li>
<a href="#">Media and Publishing</a>
<br>
<a href="#">Insurance and Financial Services</a>
<br>
</li>


</ul></p>
<p class="popup"><span class="glyphicon glyphicon-none"></span>Digital</p>
<p class="popup"><span class="glyphicon glyphicon-none"></span>Perspectives</p>
<p class="popup"><span class="glyphicon glyphicon-none"></span>About</p>




Answer

Replace $(this).find("[class='poper']").slideToggle(); with $(this).next().slideToggle('ul');

See find("[class='poper']") didn't work because putting lists in a paragraph element is forbidden by HTML standards, and some browsers(all?) put the ul outside the p element. Relevant: ul element can never be a child of p element

$("[class*='popup']").click(function(){
				$(this).find('span.glyphicon').toggleClass('rotate');
$(this).next('ul').slideToggle();
			  })
.rotate {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.popupMenu1,.popupMenu2,.popupMenu3{
display:none;	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <p class="popup1"><span class="glyphicon glyphicon-triangle-right" id="arrow1"></span>Services
			    <ul class="poper popupMenu1">
				  <li><a href="#">Product Engineering</a></li>
				  <li><a href="#">Enterprise Solutions</a></li>
				  <li><a href="#">Independent Testing Services</a></li>
				  <li><a href="#">Digital Transformation</a></li>
				  <li><a href="#">Infrastructure &amp; Application Support</a></li>
				  <li><a href="#">Business Intelligence</a></li>
				  <li><a href="#">Oracle Applications</a></li>
				  <li><a href="#">Big Data Analytic</a></li>
				</ul></p>
			   <p class="popup2" ><span class="glyphicon glyphicon-triangle-right" id="arrow2"></span>Solutions
			     <ul class="poper popupMenu2">
                            <li>
                                <a href="#">Auras</a>
                                <br>
                                <a href="#">Tapshop</a>
                                <br>
                                <a href="#">Temenos  AFIS</a>
                                <br> 
                            </li>
                            <li>
                                 <a href="#">MPoS</a>
                                <br>
                                <a href="#">Techcello</a>
                                <br>
                            </li>
                        </ul></p>
			   <p class="popup3"><span class="glyphicon glyphicon-triangle-right" id="arrow3"></span>Industries
			      <ul class="poper popupMenu3">
                            <li>
                                <a href="#">Independent Software Vendors</a>
                                <br>
                                <a href="#">Healthcare</a>
                                <br>
                            </li>
                            <li>
                                <a href="#">Retail</a>
                                <br>
                                <a href="#">Education</a>
                                <br>
                            </li>
                            <li>
                                <a href="#">Media and Publishing</a>
                                <br>
                                <a href="#">Insurance and Financial Services</a>
                                <br>
                            </li>


                        </ul></p>
			   <p class="popup"><span class="glyphicon glyphicon-none"></span>Digital</p>
			   <p class="popup"><span class="glyphicon glyphicon-none"></span>Perspectives</p>
			   <p class="popup"><span class="glyphicon glyphicon-none"></span>About</p>

Comments