$(document).ready(function() {
$(".r-product-page #menu > li > a").click(function() {
$('ul.sub-menu').not($(this).siblings()).slideUp("slow");
$(this).siblings("ul.sub-menu").slideToggle("slow", function() {
$(this).siblings('.dropdown-arrow').css({
'transform': 'rotate(180deg)'
})
});
});
$(".r-product-page #menu #one").click(function() {
$(".product-container").load("productOne.html");
})
});
.r-product-page {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.r-product-page #menu {
height: 100%;
width: 300px;
}
.r-product-page #menu .product-menu {
color: #4d4d49;
font-size: 18px;
}
.r-product-page #menu .product-menu .sub-menu {
display: none;
}
.r-product-page #menu .product-menu .sub-menu li {
color: #898989;
font-family: 18px;
}
ul {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-product-page container">
<ul style="margin-top:5rem;" id="menu">
<li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
<a href="#">template A</a>
<ul class="sub-menu">
<li>x</li>
<li>y</li>
<li>z</li>
<li>l</li>
<li>m</li>
<li>n</li>
</ul>
</li>
<li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
<a href="#">Template B</a>
<ul class="sub-menu">
<li><a href="#">3.1</a>
</li>
</ul>
</li>
<li class="product-menu" id="one"><a href="#">Template C</a>
</li>
<li class="product-menu"><a href="#">Template D</a>
</li>
<li class="product-menu"><a href="#">Template E</a>
</li>
<li class="product-menu"><a href="#">Template F</a>
</li>
</ul>
<div class="product-container" />
</div>
更多信息,
我的 jsfiddle演示在这里
在这里,我想做的是,当用户点击任何带有下拉箭头的菜单时,它应该关闭过去的打开菜单并将下拉箭头旋转 180 度。
现在,我可以关闭非事件链接的子菜单,但我无法将非事件链接的下拉箭头旋转 180 度。那我应该怎么做呢?
最佳答案
您可以将active
类添加到product-menu
并使用css处理transformation
。
$(document).ready(function() {
$(".r-product-page #menu > li > a").click(function() {
$('ul.sub-menu').not($(this).siblings()).slideUp("slow").parents('.product-menu').removeClass('active');
$(this).siblings("ul.sub-menu").slideToggle("slow", function() {
if ($(this).parents('.product-menu').hasClass('active')) {
$(this).parents('.product-menu').removeClass('active')
} else $(this).parents('.product-menu').addClass('active');
});
});
$(".r-product-page #menu #one").click(function() {
$(".product-container").load("productOne.html");
})
});
.r-product-page {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.r-product-page #menu {
height: 100%;
width: 300px;
}
.r-product-page #menu .product-menu {
color: #4d4d49;
font-size: 18px;
}
.r-product-page #menu .product-menu .sub-menu {
display: none;
}
.r-product-page #menu .product-menu .sub-menu li {
color: #898989;
font-family: 18px;
}
ul {
list-style: none;
}
.product-menu .dropdown-arrow {
transition: transform .2s;
}
.product-menu.active .dropdown-arrow {
transform: rotate(180deg)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-product-page container">
<ul style="margin-top:5rem;" id="menu">
<li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
<a href="#">template A</a>
<ul class="sub-menu">
<li>x</li>
<li>y</li>
<li>z</li>
<li>l</li>
<li>m</li>
<li>n</li>
</ul>
</li>
<li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
<a href="#">Template B</a>
<ul class="sub-menu">
<li><a href="#">3.1</a>
</li>
</ul>
</li>
<li class="product-menu" id="one"><a href="#">Template C</a>
</li>
<li class="product-menu"><a href="#">Template D</a>
</li>
<li class="product-menu"><a href="#">Template E</a>
</li>
<li class="product-menu"><a href="#">Template F</a>
</li>
</ul>
<div class="product-container" />
</div>
关于Jquery 无法为事件链接以外的其他对象旋转下拉箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46557969/