我正在构建一个website,其左侧具有垂直导航,右侧具有内容,其中nav占20%的宽度,占80%。
我想单击(在nav内的切换div),将nav的宽度更改为5%,将内容宽度更改为95%。
我知道如何将类添加到被单击的元素,但是我必须知道如何影响其他元素。
任何帮助将不胜感激!
<div class="nav">
<div class="toggle">
<img src="images/toggle.png"/>
</div>
<ul>
<li class="header"><p>Szymon Fraczyk<br>photography</p></li>
<li class="szymon"><a href="index.html"><p>Szymon Fraczyk</p></a></li>
<li class="zdjecia"><a href="index.html"><p>Zdjecia</p></a></li>
<li class="slubne"><a href="index.html"><p>Slubne</p></a></li>
<li class="chrzciny"><a href="index.html"><p>Chrzciny</p></a></li>
<li class="kontakt"><a href="index.html"><p>Kontakt</p></a></li>
<li class="kontakt"></li>
</ul>
</div>
<div class="content">
<div class="royalSlider rsDefault">
<img class="rsImg" src="images/1.jpg" alt="image desc" />
<img class="rsImg" src="images/2.jpg" alt="image desc" />
<img class="rsImg" src="images/3.jpg" alt="image desc" />
<img class="rsImg" src="images/4.jpg" alt="image desc" />
<img class="rsImg" src="images/5.jpg" alt="image desc" />
<img class="rsImg" src="images/6.jpg" alt="image desc" />
<img class="rsImg" src="images/7.jpg" alt="image desc" />
</div>
</div>
</div>
最佳答案
您可以使用动画和JQuery做您想要做的事情:
您的代码:http://jsfiddle.net/f9RTJ/5/
我给你一些不错的动画效果:)
css:
.nav {
position:absolute;
top:0px;
left:0px;
width:20%;
background-color:#ccc;
}
.content {
position:absolute;
top:0px;
right:0px;
width:80%;
background-color:#aaa;
}
javascript:
$('.content').click(function(){
$(this).animate({'width':'80%'}) ;
$('.nav').animate({'width':'20%'}) ;
}) ;
$('.nav').click(function(){
$(this).animate({'width':'5%'}) ;
$('.content').animate({'width':'95%'}) ;
}) ;
关于javascript - 单击将两个类添加到不同的元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15117602/