Question

我正在构建一个website，左侧有垂直导航，右侧有内容，导航宽度为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>

Answer 1

您可以使用动画和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%'}) ;
}) ;

Answer 2

查看该页面，如果您向内容div添加了ID会更容易。然后你就可以了

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

否则你必须循环遍历所有div并找到具有类'content'的div。与此答案类似： Select element by and classname in javascript

无论哪种方式，一旦你选择了元素，就可以追加宽度为95％的类。

点击将两个类添加到不同的元素

2 个答案: