Question

我在Liferay中创建了侧面菜单，覆盖了默认导航功能，该功能在检测父级时提供了字形图标切换功能。我希望字形在没有下拉时面向正确的方向，并在下拉时面朝下。任何人都可以帮我解决这个问题吗？

提前致谢。

我的代码是：

java script:
$(document).ready(function(){
if ($(".level-1 li").has('ul.level-2')){
$('ul.level-2').parent().find('a:first').after('<button class = "btnn"><span class = "chevron"></span></button>');
}
$('ul.level-2').css('display','none');
$('button').click(function(){
$(this).next().slideToggle();

}); });


Css:

.btnn {
float: right;
border-color: #E8EBF2;
background-color: #E8EBF2;
border: none;
z-index:90;
display:inline-block !important;

}


.level-1 li a {
display:inline-block;
}


.chevron::before {
border-style: solid;
border-width: 0.25em 0.25em 0 0;
content: '';
display: inline-block;
height: 0.45em;
left: 0;
transform: rotate(45deg);
position: relative;
vertical-align: top;
width: 0.45em;
}

.chevron:after {
right: 0;
transform: rotate(90deg);
/*   border-style: solid; */
border-width: 0 0 0 0;
content: '';
display: inline-block;
/* height: 0.45em; */
position: relative;
vertical-align: top;
/* width: 0.45em; */
}

这是我的codepen链接http://codepen.io/anon/pen/EypNpQ

Answer 1

添加和删除您的＆＃34; down class＆＃34;点击事件

$(document).ready(function(){
if ($(".level-1 li").has('ul.level-2')){
$('ul.level-2').parent().find('a:first').after('<button class = "btnn"><span class = "chevron"></span></button>');
}
$('ul.level-2').css('display','none');
$('button').click(function(){
$(this).next().slideToggle();
  if($(this).hasClass('chevron-down'))
    $(this).removeClass('chevron-down');
  else
    $(this).addClass('chevron-down');
}); });

Here a working pen

SideNav切换问题Liferay

1 个答案: