第二部分元素移动到第二行

时间:2012-08-27 11:10:55

标签: jquery html css html5 css3

我有两个section元素,例如<section class="first"></section><section class="rightarrow"></section>。在第一部分元素中我有菜单,在第二部分中有一个指向右侧的箭头。此箭头位于第一个section元素的右上角,第一个section元素显示也设置为none。当我点击箭头然后菜单出现并向右侧滑动(这是有效的),但问题是当第一部分是元素显示设置为阻止然后箭头转到下一行。

有人可以给我一些例子,我如何在第一个元素的右侧保留箭头?

这是我的css

.first {
position: relative;
border-right: 1px solid #666;
display: none;
left: -370px;
float: left;
}

.rightarrow {
float: left;
display: inline-block;
position: relative;
margin-right: 1%;
margin-top: 2%;
figure {
    width: 31px; height: 80px;
    background: url(../../images/rightarrow.png) no-repeat;
    cursor: pointer;
    //left: 0;
}
}

这是我的HTML

<section class="column three first">
        <section class="row top topfirst">
            <span class="user">Helsinki, Suomi</span>
            <span class="comments user">Vaihda sijaintia</span>
            <section class="clear"></section>
        </section>
        <section class="row top topsecond">
            <figure>
                <img src="assets/images/user.png" />
            </figure>
            <span class="user">Matti Meikalainen</span>
            <span class="comments user">Kirjaudu ulos</span>
            <p><input type="text" class="searchbox" placeholder="Hae" /></p>
        </section>
        <section class="row topthird">
            Etusivu
        </section>
        <nav class="row accordion">
            <ul class="menu">
                <li>
                    <a href="#">Uutiset</a>
                    <figure class="down"></figure>
                    <section class="clear"></section>
                    <ul class="inside">
                        <li><a href="">Fringilla Condimentum</a></li>
                        <li><a href="">Lorem</a></li>
                        <li><a href="">Fringillau</a></li>
                        <li><a href="">Curabitur</a></li>
                        <li><a href="">Mollis</a></li>
                        <li><a href="">Ipsum</a></li>
                        <li><a href="">Lorem</a></li>
                        <li><a href="">Fringillau</a></li>
                        <li><a href="">Curabitur</a></li>
                        <li><a href="">Mollis</a></li>
                        <li><a href="">Ipsum</a></li>
                    </ul>
                </li>
                <li><a href="">Foorumi</a></li>
                <li><a href="">Kauppa</a></li>
                <li><a href="">Messut</a></li>
                <li>
                    <a href="">Asiakaspalvelu</a>
                    <figure class="down"></figure>
                    <ul class="inside">
                        <li><a href="">Tilaa lehti</a></li>
                        <li><a href="">Muutos tilaukseen</a></li>
                        <li><a href="">Lähetä uutisvinkki</a></li>
                        <li><a href="">Anna palautetta</a></li>
                    </ul>
                </li>
                <li><a href="">Nakoislehti</a></li>
                <li><a href="">Nae meidat</a></li>
            </ul>
        </nav>
    </section>
    <section class="rightarrow">
        <figure>
        </figure>
    </section>

这是我的js

$('.rightarrow').on('click', function () {

    $('.rightarrow').animate({'margin-left': '366px'}, 1000);
    /*
    $('.first').animate({'left': '0px'}, 100, function () {

    });*/
    $('.second').animate({'margin-left': '10px'}, 1000, function () {

    });

    $('.first').css('display', 'block').animate({'left': '0px'}, 1000); 
  });

2 个答案:

答案 0 :(得分:0)

display: block表示“除了我之外没有其他内容”,所以你不能使用它。

将箭头元素创建为.first的子元素(即在DIV内部)。而不是完全隐藏它,只显示最右边的部分(包含箭头)。单击该按钮时,可以将元素移动到视图中。

答案 1 :(得分:0)

更改

$('.rightarrow').animate({'margin-left': '366px'}, 1000);

$('.rightarrow').css({'margin-left': '366px','position':'absolute','top':'20px';});

将帮助您实现您的目标。