javascript - 弹出菜单的 slideToggle

Question

我想滑动弹出菜单并使用 this 变量添加旋转类。现在旋转类追加成功。但我还需要滑动弹出菜单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 1

将 $(this).find("[class='poper']").slideToggle(); 替换为

  var nextUl=$(this).next();
  if(nextUl.is('ul')) nextUl.slideToggle();

请参阅 find("[class='poper']") 不起作用，因为 HTML 标准禁止将列表放在段落元素中，并且某些浏览器(全部？)将 ul在 p 元素之外。相关:ul element can never be a child of p element

$("[class*='popup']").click(function(){				
  var nextUl=$(this).next();
  if(nextUl.is('ul')) nextUl.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>