jquery - 第二节元素移动到第二行

Question

我有两个 section <section class="first"></section><section class="rightarrow"></section> 等元素.在第一部分元素中我有菜单，在第二部分元素中有一个指向右边的箭头。此箭头位于第一个部分元素的右上角，并且第一个部分元素显示设置为无。当我单击箭头时，菜单出现并向右侧滑动(有效)，但问题是当第一部分的元素显示设置为 block 时，箭头转到下一行。

谁能给我一些例子，我怎样才能让箭头保持在第一个元素的右侧？

这是我的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>

这是我的代码

$('.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); 
  });

Answer 1

display: block 的意思是“同一行除了我之外什么都没有”，所以你不能使用它。

创建箭头元素作为 .first 的子元素(即在 DIV 内部)。不要完全隐藏它，而是只显示最右边的部分(包含箭头)。单击按钮后，您可以将元素移到 View 中。