我想滑动弹出菜单并使用this
变量添加旋转类。现在旋转类成功追加。但我还需要滑动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 & 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>
&#13;
答案 0 :(得分: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();
})
&#13;
.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;
}
&#13;
<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 & 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>
&#13;