如何在不按下其他元素的情况下切换元素答案

【问题标题】：How can I toggle an element without pushing down other elements如何在不按下其他元素的情况下切换元素
【发布时间】：2015-10-29 08:22:02
【问题描述】：

我正在尝试创建一个项目协作来列出。当我单击“分配任务”按钮时，弹出 div 应该包含一个日期选择器和一个任务应该分配给谁的下拉列表。但现在我只是放了一些 lorem impsum 文本。

我遇到的问题是当弹出 div 显示时所有 li 元素都被推下

我尝试将弹出窗口设置为绝对，但它一直到页面顶部。我尝试将 ul 设置为绝对，但它全部折叠在一行中

有没有人可以提供任何可以让我切换 assign_task div 而不会下推 ul 元素的想法？

下面是我的 jsfiddle 的链接。任何帮助将非常感激。

https://jsfiddle.net/eldan88/qvrs8osm/

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <script src="../assets/js/jquery.js"></script>


    <style>

        body{
           margin-top : 300px
        }

        .assign_task,.datepicker{
            display: inline-block;
            width: 212px;
            position: relative;
            z-index: 10;
            background-color: white;


        }

        .assign_task{
            top :220px
        }






    </style>
</head>
<body>



<ul>

    <li>Finish Wireframe Design <button>Assign Task</button>

    <div class="assign_task">

        <div class="datepicker"> Due Date and user task assignment goes here


            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem eligendi eos fuga in ipsum libero sit totam veritatis? Ab adipisci architecto debitis doloremque fuga id molestiae provident saepe unde vel.lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi cumque et libero nostrum porro, quae sunt! Aspernatur deleniti fugit, magni

        </div>



    </div>
    </li>

</ul>


<ul>

    <li>Make sure that the contact page, and the landing page gets revised tomorrow <button>Assign Task</button>

        <div class="assign_task">

            <span class="datepicker"> Due Date and user task assignment goes here</span>

        </div>

    </li>

</ul>

<script>

    $(".assign_task").hide();

    $("button").click(function () {

        var task_assignment_div = $(this).next();

        task_assignment_div.toggle();

    });


</script>


</body>
</html>

【问题讨论】：

如果设置position:absolute而不设置top，则元素将显示为好像未定位。 Example here。另见Position:absolute without top/left/bottom/right values
您是否考虑过使用 jQuery UI 对话框小部件？这会将 DIV 覆盖在页面上。

标签： jquery html css

【解决方案1】：

要“监禁”或“包含”一个位置：绝对，您需要一个父元素，即位置：相对|绝对|固定（基本上没有默认值）。

所以在你的情况下你需要：

.assign_task{
  top :220px
  position:relative;
}

如果你想让孩子是绝对位置。干杯！

【讨论】：

【解决方案2】：

确实需要将父元素包裹在 position:relative 中以包含绝对定位的元素。但是关于显示浮出控件时事物移动的问题，我建议您切换 CSS 类名称，而不是切换（），为原始浮出控件分配默认样式的可见性：隐藏，并让切换的 CSS 类覆盖该样式与可见性：可见：

.assign_task {
visibility: hidden;
}
.assign_task.active { /* toggle class active */
visibility: visible;
}

【讨论】：

我同意使用 css 代替 jQuery 的“toggle”、“slideUp”样式。添加和删除一个类，然后允许您的 css 指示将有助于测试，从长远来看，如果您添加 css 动画/过渡，将获得更流畅的体验。
好的，知道了。是的，我需要将父元素包装为相对元素。谢谢你让我知道可见性属性。我什至都不知道！