jquery - HTML 组件移动将使用 slideToggle

Question

当我单击类部分 (div) 时，我需要将部分详细信息显示为幻灯片切换。它按预期工作正常，但是当我单击该部分时，它向下滑动但另一个组件未对齐(年龄范围组件向左侧移动)，所以我想到在组件顶部显示幻灯片切换。我使用了 z-index 并没有解决我的问题。

请引用 JsFiddle:http://jsfiddle.net/LccuM/

我的代码:

<div>
    <div style="width:550px;">
        <br>  
        <label>Name</label>
        <input type="text" name="name" value="" style="width: 208px;" /> 
        <button type="button">send</button>  
        <br><br><br><br>
    </div>

    <div style="float: right; margin-top:-95px; width: 100px; " class="stdSection" >
        <a>Class Section</a> 
        <fieldset class="section" style="display:none; float:right; width:200px;">
            <input type="checkbox" name="sec" value="1" />1<br />
            <input type="checkbox" name="sec" value="2" />2<br />
            <input type="checkbox" name="sec" value="3" />3<br />
            <input type="checkbox" name="sec" value="4" />4 <br />
            <input type="checkbox" name="sec" value="5" />5<br />
        </fieldset>
    </div>

    <div style="float: right; margin-top:-39px; padding-right: 25px; ">
        <span>Age : 5</span>
        <input type="range" name="points" min="5" max="18">
        <span>18</span>
    </div>
</div>

J查询:

$(document).ready(function() {
    $('div.stdSection').click(function() { 
        $(this).find('.section').slideToggle('slow');
    });
});

我不希望在我查看滑动切换时移动年龄范围组件。

Answer 1

使用下面的 css 使其位置正确

**CSS**
.section {
    background: none repeat scroll 0 0 #FFFFFF;
    display: block;
    float: right;
    position: absolute;
    right: 0;
    width: 200px;
    z-index: 1000;
}
.slider {z-index:1;}

Demo Fiddle