当点击按钮时,我需要在父母的兄弟标签上添加边距左侧更改动画,并且CSS不可能。
我尝试了JQuery动画方法并且没有工作
CSS:
div.sideMenuBar{
display:inline-block;
width:80px;
color:black;
}
div.sideMenuBar.hiddenBar{
margin-left:-100px;
}
HTML:
<header>
<div class="barButton">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<h1 class="Rubrik" > Tillgångar </h1>
</header>
<div class="body">
<div class="sideMenuBar hiddenBar">
<ul>
<li><a href="#" >SideBar1</a></li>
<li><a href="#">SideBar2</a></li>
<li><a href="#">SideBar3</a></li>
</ul>
</div>
JS:
$('div.barButton').on('click',function(e){
$(this).toggleClass('change');
//$('div.sideMenuBar').slideToggle();
$('div.sideMenuBar').toggleClass('hiddenBar');
if($('div.sideMenuBar').hasClass('hiddenBar')){
$('div.sideMenuBar').animate('margin-left',0);
}else {
$('div.sideMenuBar').animate('margin-left','-100px');
}
});
问题是改变类是否有效,所以边距改变但我需要动画和animate()方法不起作用。