Question

我有两个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); 
  });

Answer 1

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

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

Answer 2

更改

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

到

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

将帮助您实现您的目标。

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

2 个答案: