Question

当我点击按钮时，我遇到了覆盖隐藏div的问题。我想要发生的是当隐藏的div出现它根据它的高度在它下面的其他所有东西之上。我可以做到的就是将所有其他内容向下推，就像你在我的代码片段中看到的一样。

我看过的其他解决方案都没有考虑使用bootstrap，当我测试我找到的解决方案时，它会让一切都变得糟糕，那就是当我使用绝对作为位置时，就像我见过的解决方案一样。

任何帮助都将不胜感激。

$(document).ready(function () {

  $("#myHiddenDiv").hide();

});

$("#myBtn").click(function () {
  $("#myHiddenDiv").toggle();
});

$("#btn2").click(function () {
  $("#myHiddenDiv").toggle();
});

#myHiddenDiv {
    /*width: 325px;*/
    height: 300px;
    border: 1px solid green;
    background-color: cornflowerblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>




<body>
    <div class="container-fluid">
        <div class="form-horizontal">
            <div class="row row-splitter">
                <label for="ddLocation" class="col-md-1 control-label">Location</label>
                <div class="col-md-2">
                   
                    <div class="btn btn-primary" id="myBtn">Click Me</div>
                </div>
                <div id="myHiddenDiv" class="col-md-offset-1 col-md-10" style="z-index:2; position:relative">
                    <div id="MaterialGridList">

                    </div>
                </div>
            </div>

            <div style="z-index:1; position:relative;">
                <div class="row row-splitter">
                    <label for="ddLocationMaterial" class="col-md-1 control-label">Material</label>
                    <div class="col-md-2">
                        <input type="text" class="form-control" placeholder="Location Material.." />
                    </div>

                    <label for="ddColor" class="col-md-1 control-label">Color</label>
                    <div class="col-md-2">
                        <input type="text" id="ddColor" class="form-control" style="width:100%" />
                    </div>

                    <label for="qty" class="col-md-1 control-label">Length</label>
                    <div class="col-md-2">
                        <input type="text" id="qty" class="form-control" placeholder="Length..." />
                    </div>

                    <label for="ddColor" class="col-md-1 control-label">Width</label>
                    <div class="col-md-1">
                        <input type="text" id="qty2" class="form-control" placeholder="Width..." />
                    </div>

                </div>

                <div class="row row-splitter">
                    <label for="ddColor" class="col-md-1 control-label">Width in Inches</label>
                    <div class="col-md-1">
                        <input type="text" class="form-control" placeholder="Width..." />
                    </div>

                </div>
                <div class="row row-splitter">
                    <div class="col-md-10 col-lg-offset-1">
                        <div style="border:1px solid black; height:400px; border-radius:5px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Answer 1

重构一些stuf，这可能适合你。您需要对框使用带有“绝对”值的属性“position”，并且表单需要具有“相对”值。使用z-index属性设置位置与其他标记的对比。

$(function () {

     $("#myBtn").click(function () {
         $("#myHiddenDiv").toggle();
     });

});

.form-container {
   position: relative;
   z-index: 8;
}

#myHiddenDiv {
    display: none;
    height: 100%; 
    width:100%;
    border: 1px solid green;
    background-color: cornflowerblue;
    position: absolute; 
    z-index: 9;
}

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

	<body>
	    <div class="container-fluid">
	        <div class="form-horizontal">
	            <div class="row row-splitter">
	                <label for="ddLocation" class="col-md-1 control-label">Location</label>
	                <div class="col-md-2"> 
	                    <div class="btn btn-primary" id="myBtn">Click Me</div>
	                </div>
	            </div>

	            <div class="form-container">
	                <div id="myHiddenDiv" class="col-md-offset-1 col-md-10">
	                    <div id="MaterialGridList"></div>
	                </div>
	                <div class="row row-splitter">
	                    <label for="ddLocationMaterial" class="col-md-1 control-label">Material</label>
	                    <div class="col-md-2">
	                        <input type="text" class="form-control" placeholder="Location Material.." />
	                    </div>

	                    <label for="ddColor" class="col-md-1 control-label">Color</label>
	                    <div class="col-md-2">
	                        <input type="text" id="ddColor" class="form-control" style="width:100%" />
	                    </div>

	                    <label for="qty" class="col-md-1 control-label">Length</label>
	                    <div class="col-md-2">
	                        <input type="text" id="qty" class="form-control" placeholder="Length..." />
	                    </div>

	                    <label for="ddColor" class="col-md-1 control-label">Width</label>
	                    <div class="col-md-1">
	                        <input type="text" id="qty2" class="form-control" placeholder="Width..." />
	                    </div>

	                </div>

	                <div class="row row-splitter">
	                    <label for="ddColor" class="col-md-1 control-label">Width in Inches</label>
	                    <div class="col-md-1">
	                        <input type="text" class="form-control" placeholder="Width..." />
	                    </div>

	                </div>
	                <div class="row row-splitter">
	                    <div class="col-md-10 col-lg-offset-1">
	                        <div style="border:1px solid black; height:400px; border-radius:5px;"></div>
	                    </div>
	                </div>
	            </div>
	        </div>
	    </div>
	</body>

Answer 2

您必须使用position: absolute。要解决问题，只需将行width: 100%添加到#myHiddenDiv。

我还建议您查看jQuery动画方法，例如.fadeToggle()和.slideToggle()。

以下是工作样本。

编辑：重写了一些代码以解决评论中指出的问题

＆＃13;

$("#myBtn, #btn2").click(function () {
  $("#myHiddenDiv").toggle();
});

＆＃13;

#myHiddenDiv {
    display: none;
    position: absolute;
    width: 100%; 
    z-index: 2;
    height: 300px;
    border: 1px solid green;
    background-color: cornflowerblue;
}

#ddColor  {
    width: 100%;
}

.relative {
    position: relative;
    z-index: 1;
}

.black-border {
    border: 1px solid black;
    height: 400px;
    border-radius: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>




<body>
    <div class="container-fluid">
        <div class="form-horizontal">
            <div class="row row-splitter">
                <label for="ddLocation" class="col-md-1 control-label">Location</label>
                <div class="col-md-2">
                   
                    <div class="btn btn-primary" id="myBtn">Click Me</div>
                </div>
                <div id="myHiddenDiv" class="col-md-offset-1 col-md-10">
                    <div id="MaterialGridList">

                    </div>
                </div>
            </div>

            <div class="relative">
                <div class="row row-splitter">
                    <label for="ddLocationMaterial" class="col-md-1 control-label">Material</label>
                    <div class="col-md-2">
                        <input type="text" class="form-control" placeholder="Location Material.." />
                    </div>

                    <label for="ddColor" class="col-md-1 control-label">Color</label>
                    <div class="col-md-2">
                        <input type="text" id="ddColor" class="form-control" />
                    </div>

                    <label for="qty" class="col-md-1 control-label">Length</label>
                    <div class="col-md-2">
                        <input type="text" id="qty" class="form-control" placeholder="Length..." />
                    </div>

                    <label for="ddColor" class="col-md-1 control-label">Width</label>
                    <div class="col-md-1">
                        <input type="text" id="qty2" class="form-control" placeholder="Width..." />
                    </div>

                </div>

                <div class="row row-splitter">
                    <label for="ddColor" class="col-md-1 control-label">Width in Inches</label>
                    <div class="col-md-1">
                        <input type="text" class="form-control" placeholder="Width..." />
                    </div>

                </div>
                <div class="row row-splitter">
                    <div class="col-md-10 col-lg-offset-1">
                        <div class="black-border"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

＆＃13;

尝试在其下方放置div叠加内容时，它不会叠加，只会将内容向下推

2 个答案: