0

我有两个section元素，例如<section class="first"></section><section class="rightarrow"></section>. 在第一个部分元素中，我有菜单，在第二个部分中，有一个指向右侧的箭头。该箭头位于第一个截面元素的右上角，并且第一个截面元素显示设置为无。当我单击箭头时，菜单出现并滑向右侧（有效），但问题是当第一部分元素显示设置为阻止时，箭头转到下一行。

有人可以给我一些例子，我怎样才能将箭头保留在第一个元素的右侧？

这是我的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); 
  });
4

2 回答 2

0

改变你的

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

至

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

将帮助您实现您的目标。

于 2012-08-27T12:20:08.800 回答
0

display: block意思是“除了我在同一行”，所以你不能使用它。

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

于 2012-08-27T11:29:19.340 回答