Question

我正在尝试显示下拉菜单，但是当我点击按钮显示菜单时，会显示菜单，但页面内容会向下移动。我已经测试了其他解决方案（content moving with drop down，drop down content move，drop down menus pushing content down），但没有运气。您可以在JSfiddle上看到代码。

<div id="test">
<ul>
    <li id="LI_1">   
        <label id="LABEL_2">
            <button type="button" id="BUTTON_3">
                Formato
            </button>
        </label>
        <div id="DIV_4">
            <ul id="UL_5">
                <li id="LI_6">
                    3D
                </li>
                <li id="LI_7">
                    Blu-RayDisc
                </li>
                <li id="LI_8">
                    DVD
                </li>
            </ul>
            <span id="SPAN_9">Close</span><span id="SPAN_10"></span>
        </div>
        <div id="DIV_11">
        </div>
    </li>
</ul>
</div>
<div>
   More Text 
</div>

使用Javascript：

$(document).ready(function(){
$('#LABEL_2').on('click', function(element){        
    $('#DIV_4').toggle();
})
});

CSS：

#LI_1 {
box-sizing: border-box;
color: rgb(102, 102, 102);
float: left;    
position: relative;
width: 100%;
perspective-origin: 74.078125px 92.5px;
transform-origin: 74.078125px 92.5px;
border: 0px none rgb(102, 102, 102);
font: normal normal normal normal 13px/20px Helvetica, Arial, sans-serif;
list-style: none outside none;
margin: 0px 0px 10px;
outline: rgb(102, 102, 102) none 0px;
overflow: hidden;
padding: 0px 3px 0px 0px;
}
 #LABEL_2 {
color: rgb(102, 102, 102);
cursor: pointer;
display: block;
height: 28px;
text-align: left;
width: 145.15625px;
perspective-origin: 72.578125px 14px;
transform-origin: 72.578125px 14px;
border: 0px none rgb(102, 102, 102);
font: normal normal bold normal 13px/16.8999996185303px Helvetica, Arial, sans-serif;
list-style: none outside none;
margin: 0px 0px 10px;
outline: rgb(102, 102, 102) none 0px;
}
 #BUTTON_3 {
color: rgb(204, 204, 204);
cursor: pointer;
height: 28px;
text-transform: uppercase;
vertical-align: middle;
width: 67.609375px;
perspective-origin: 33.796875px 14px;
transform-origin: 33.796875px 14px;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 1px solid rgb(221, 221, 221);
border-radius: 3px 3px 3px 3px;
font: normal normal bold normal 11px/20px Helvetica, Arial, sans-serif;
list-style: none outside none;
margin: 0px 0px 0px 5px;
outline: rgb(204, 204, 204) none 0px;
overflow: hidden;
padding: 3px 5px;
}
 #DIV_4 {     
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 3px 0px;
box-sizing: border-box;
color: rgb(102, 102, 102);    
position: relative;
text-align: left;
width: 130.640625px;
perspective-origin: 65.3125px 71px;
transform-origin: 65.3125px 71px;
background: rgb(253, 251, 228) none repeat scroll 0% 0% / auto padding-box border-box;
border: 1px solid rgb(205, 196, 168);
border-radius: 2px 2px 2px 2px;
font: normal normal normal normal 13px/20px Helvetica, Arial, sans-serif;
list-style: none outside none;
margin: 0px 0px 5px;
outline: rgb(102, 102, 102) none 0px;
padding: 10px;
}
 #UL_5 {
color: rgb(102, 102, 102);
height: 120px;
text-align: left;
width: 108.640625px;
perspective-origin: 54.3125px 60px;
transform-origin: 54.3125px 60px;
border: 0px none rgb(102, 102, 102);
font: normal normal normal normal 13px/20px Helvetica, Arial, sans-serif;
margin: 0px;
outline: rgb(102, 102, 102) none 0px;
overflow: hidden;
padding: 0px;
}
 #LI_6 {
background-position: 0px 0px;
box-sizing: border-box;
color: rgb(204, 204, 204);
display: block;
height: 20px;
position: relative;
text-shadow: rgb(255, 255, 255) 1px 1px 0px;
width: 108.640625px;
perspective-origin: 54.3125px 10px;
transform-origin: 54.3125px 10px;
background: rgba(0, 0, 0, 0) url(http://edv.com/modules/mod_jak2filter/assets/css/icon-none.png) no-repeat scroll 0px 0px / auto padding-box border-box;
border: 0px none rgb(204, 204, 204);
font: normal normal bold normal 11px/20px Helvetica, Arial, sans-serif;
margin: 0px 0px 20px;
outline: rgb(204, 204, 204) none 0px;
padding: 0px 3px 0px 20px;
}
 #LI_7, #LI_8 {
background-position: 0px 0px;
box-sizing: border-box;
color: rgb(102, 102, 102);
display: block;
height: 20px;
position: relative;
text-shadow: rgb(255, 255, 255) 1px 1px 0px;
width: 108.640625px;
perspective-origin: 54.3125px 10px;
transform-origin: 54.3125px 10px;
background: rgba(0, 0, 0, 0) url(http://edv.com/modules/mod_jak2filter/assets/css/icon-none.png) no-repeat scroll 0px 0px / auto padding-box border-box;
border: 0px none rgb(102, 102, 102);
font: normal normal bold normal 11px/20px Helvetica, Arial, sans-serif;
margin: 0px 0px 20px;
outline: rgb(102, 102, 102) none 0px;
padding: 0px 3px 0px 20px;
}
 #SPAN_9 {
background-position: 50% 50%;
color: rgb(102, 102, 102);
display: block;
height: 12px;
position: absolute;
right: 8px;
text-align: left;
text-indent: -12987px;
top: 8px;
width: 12px;
align-self: stretch;
perspective-origin: 7px 7px;
transform-origin: 7px 7px;
background: rgb(204, 204, 204) url(http://edv.com/modules/mod_jak2filter/assets/css/btn-close.png) no-repeat scroll 50% 50% / auto padding-box border-box;
border: 1px solid rgb(153, 153, 153);
border-radius: 3px 3px 3px 3px;
font: normal normal normal normal 13px/20px Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(102, 102, 102) none 0px;
}
 #SPAN_10 {
color: rgb(102, 102, 102);
display: block;
height: 12px;
left: 10px;
position: absolute;
text-align: left;
top: -12px;
width: 14px;
align-self: stretch;
perspective-origin: 7px 6px;
transform-origin: 7px 6px;
background: rgba(0, 0, 0, 0) url(http://edv.com/modules/mod_jak2filter/assets/css/arrow.png) no-repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(102, 102, 102);
font: normal normal normal normal 13px/20px Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(102, 102, 102) none 0px;
}

 #DIV_11 {
color: rgb(102, 102, 102);
text-align: left;
width: 145.15625px;
perspective-origin: 72.578125px 0px;
transform-origin: 72.578125px 0px;
border: 0px none rgb(102, 102, 102);
font: normal normal normal normal 13px/20px Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(102, 102, 102) none 0px;
}
 #SCRIPT_12 {
color: rgb(102, 102, 102);
text-align: left;
border: 0px none rgb(102, 102, 102);
font: normal normal normal normal 13px/20px Helvetica, Arial, sans-serif;
list-style: none outside none;
outline: rgb(102, 102, 102) none 0px;
}

我认为问题出在CSS上，但我不知道在哪里。

感谢。

Answer 1

如果我理解正确，您position: fixed;似乎需要position: relative;而不是#DIV_4。

http://jsfiddle.net/zkos7kwz/1/

Answer 2

是的，没错。＃DIV_4处的相对位置会移动您的内容。

也可以做更好的命名，因为它很难读取你的代码。

命名li-tag LI_6是没有意义的。使用描述其内容的名称。例如为您的下拉列表命名dropdown。

您可以在下面的演示中和jsFiddle处尝试不同的位置属性。固定位置和绝对位置在这里工作。

但我认为这里的定位是最好的。

＆＃13;

$(function() {
    $('#showDropdown').click(function() {
        var $drop = $('.dropdown');
        $drop.css({'position': $('#positioning').val()});
        $drop.toggle();
    });
});

＆＃13;

.dropdown {
    /*position: fixed;*/
    display: none;
    background: #fff;
    width: 300px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showDropdown">dropdown</button>

<select id="positioning">
    <option value="absolute">absolute</option>
    <option value="fixed">fixed</option>
    <option value="relative">relative</option>
</select>

<div class="dropdown">
    <ul>
        <li>test 1</li>
        <li>test 2</li>
    </ul>
</div>
<div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</div>

＆＃13;

下拉菜单向下移动页面内容

2 个答案: