0

我正在建立一个网站，左侧有垂直导航，右侧有内容，其中导航占 20% 宽度，内容占 80%。

我想点击（切换 div，导航内部）将导航的宽度更改为 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>
4

2 回答 2

2

你可以使用动画和 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%'}) ;
}) ;
于 2013-02-27T16:56:45.490 回答
2

查看页面，如果您将 id 添加到内容 div 会更容易。然后你就可以

var d = document.getElementById('content');
d.className = d.className + "wideClass";

否则，您将不得不遍历所有 div 并找到具有“内容”类的那个。类似于这个答案： Select element by and classname in javascript

无论哪种方式，一旦您选择了元素，您就可以根据需要附加使宽度为 95% 的类。

于 2013-02-27T16:56:54.683 回答