我正在构建一个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/

10-12 00:14
查看更多