我想更改弹出菜单的图形图标＆gt;当弹出子菜单可见时，它需要更改为^，当它不可见时，它需要在＆gt;。
$(document).ready(function() {
$('.popup1').click(function(){
$('.popupMenu1').slideToggle();
})
$('.popup2').click(function(){
$('.popupMenu2').slideToggle();
})
$('.popup3').click(function(){
$('.popupMenu3').slideToggle();
})
}); .popupMenu1,.popupMenu2,.popupMenu3{
display:none;
}
.popup1,.popup,.popup2,.popup3{
cursor:pointer;
}
.popupMenu1 > li >a,.popup,.popupMenu2 > li >a,.popupMenu3 > li >a{
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="parentMobileMenu">
<p class="popup1"><span class="glyphicon glyphicon-triangle-right" id="arrow1"></span>Services</p>
<ul class="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 class="popup2" ><span class="glyphicon glyphicon-triangle-right" id="arrow2"></span>Solutions</p>
<ul class="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 class="popup3"><span class="glyphicon glyphicon-triangle-right" id="arrow3"></span>Industries</p>
<ul class="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 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>
</div>
答案 0 :(得分：2)
只需在CSS中添加课程，然后在transform添加rotate-90deg媒体资源，每当发生点击时，toggle class glyphicon rotate。下面我添加了额外的$(document).ready(function() {
$('.popup1').click(function() {
$(this).find('span.glyphicon').toggleClass('rotate');
$('.popupMenu1').slideToggle();
})
$('.popup2').click(function() {
$(this).find('span.glyphicon').toggleClass('rotate');
$('.popupMenu2').slideToggle();
})
$('.popup3').click(function() {
$(this).find('span.glyphicon').toggleClass('rotate');
$('.popupMenu3').slideToggle();
})
});课程并切换该课程。
.popupMenu1,
.popupMenu2,
.popupMenu3 {
display: none;
}
.popup1,
.popup,
.popup2,
.popup3 {
cursor: pointer;
}
.popupMenu1 > li >a,
.popup,
.popupMenu2 > li >a,
.popupMenu3 > li >a {}
.rotate {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="parentMobileMenu">
<p class="popup1"><span class="glyphicon glyphicon-triangle-right" id="arrow1"></span>Services</p>
<ul class="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 class="popup2"><span class="glyphicon glyphicon-triangle-right" id="arrow2"></span>Solutions</p>
<ul class="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 class="popup3"><span class="glyphicon glyphicon-triangle-right" id="arrow3"></span>Industries</p>
<ul class="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 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>
</div>class
<强>更新
您的代码可以更加更简单，使用一些常见的class并将点击附加到一个特定的公共$(document).ready(function() {
$('.popup').click(function() {
var target = $(this).data('target'); //get the target element
$(this).find('span.glyphicon').toggleClass('rotate');
$(target).slideToggle();
})
});。以下为例。
.popupMenu1,
.popupMenu2,
.popupMenu3 {
display: none;
}
.popup1,
.popup,
.popup2,
.popup3 {
cursor: pointer;
}
.popupMenu1 > li >a,
.popup,
.popupMenu2 > li >a,
.popupMenu3 > li >a {}
.rotate {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
transition:all .5s; /*Animation*/
/*Add for other browser specific as above you see in transform
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="parentMobileMenu">
<p class="popup1 popup" data-target=".popupMenu1"><span class="glyphicon glyphicon-triangle-right" id="arrow1"></span>Services</p>
<ul class="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 class="popup2 popup" data-target=".popupMenu2"><span class="glyphicon glyphicon-triangle-right" id="arrow2"></span>Solutions</p>
<ul class="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 class="popup3 popup" data-target=".popupMenu3"><span class="glyphicon glyphicon-triangle-right" id="arrow3"></span>Industries</p>
<ul class="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 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>
</div>{{1}}
答案 1 :(得分：1)
只需更改下面的脚本
$('.popup1').click(function(){
$('.popupMenu1').slideToggle();
if $('.popup1').has_class('glyphicon-triangle-right') {
$('.popup1').remove_class('glyphicon-triangle-right').add_class('glyphicon-triangle-top');
} else {
$('.popup1').remove_class('glyphicon-triangle-top').add_class('glyphicon-triangle-right');
}
})
答案 2 :(得分：1)
这是具有通用功能的jquery解决方案。
$(document).ready(function() {
$('.popup1').click(function(){
$('.popupMenu1').slideToggle();
toggleclass($(this));
})
$('.popup2').click(function(){
$('.popupMenu2').slideToggle();
toggleclass($(this));
})
$('.popup3').click(function(){
$('.popupMenu3').slideToggle();
toggleclass($(this));
})
});
function toggleclass(obj){
if ($(obj).find('span').hasClass('glyphicon-triangle-right')) {
$(obj).find('span').removeClass('glyphicon-triangle-right');
$(obj).find('span').addClass('glyphicon-triangle-bottom');
} else {
$(obj).find('span').removeClass('glyphicon-triangle-bottom');
$(obj).find('span').addClass('glyphicon-triangle-right');
}
} .popupMenu1,.popupMenu2,.popupMenu3{
display:none;
}
.popup1,.popup,.popup2,.popup3{
cursor:pointer;
}
.popupMenu1 > li >a,.popup,.popupMenu2 > li >a,.popupMenu3 > li >a{
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="parentMobileMenu">
<p class="popup1"><span class="glyphicon glyphicon-triangle-right" id="arrow1"></span>Services</p>
<ul class="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 class="popup2" ><span class="glyphicon glyphicon-triangle-right" id="arrow2"></span>Solutions</p>
<ul class="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 class="popup3"><span class="glyphicon glyphicon-triangle-right" id="arrow3"></span>Industries</p>
<ul class="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 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>
</div>