[英]Showing the div when display is set to none
我在玩jQuery和拖放功能。 我有一個div設置為hidden在CSS中。 激活拖動元素時，應通過將display設置為inline （這是默認值）來顯示droppable放置元素。
但是， display: inline; 不否決display: none; 。 如何做到這一點（通過jQuery或CSS）？
我當前的代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Visual feedback</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<style>
#draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
#droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 20px; display: none; }
.droppable-highlight { display: inline; }
h3 { clear: left; }
</style>
<script>
$(function() {
$( "#draggable2" ).draggable();
$( "#droppable" ).droppable({
accept: "#draggable2",
activeClass: "droppable-highlight",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
<h3>Feedback on activating draggable:</h3>
<div id="draggable2" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" >
<p>Drop here</p>
</div>
</body>
</html>
Tinker.io鏈接： http ：//tinker.io/bf197
問題在於，當隱藏可放置對象（已display: none ）時，jQuery UI代碼沒有將類添加到可放置對象中。 它確實增加了 ，如果它是可見的。
這是未display: none的更新修補程序display: none ： http : //tinker.io/bf197/1
#droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 20px; }
#droppable.droppable-highlight { border-color: red; display: block; }
如果您使用Chrome的開發工具或類似工具觀看，您會看到該類已添加（邊框變成紅色）。
但是，請通過display: none查看此內容display: none不再display: none ： http : //tinker.io/bf197/2
#droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 20px; display: none; }
#droppable.droppable-highlight { border-color: red; display: block; }
如果您觀看開發工具，則永遠不會添加該類。 顯然，如果不可見，jQuery UI將忽略該droppable。
您可能需要將此問題作為jQuery UI團隊的一個問題，因為代碼似乎正在明確檢查這種情況。
我確實找到了部分解決方法：使用visibility而不是display ： http : //tinker.io/bf197/3
#droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 20px; visibility: hidden; }
#droppable.droppable-highlight { visibility: visible; }
這行得通，但當然存在具有visibility: hidden的問題visibility: hidden元素仍然會占用其布局空間。
您可以從布局中刪除元素而不使其display: none並獲得所需的效果： http : //tinker.io/bf197/5
#droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 40px; position: absolute; left: -10000px; }
#droppable.droppable-highlight { border-color: red; position: static; }
通過在正常情況下將元素置於頁面外，然后在具有類時覆蓋該位置，可以工作。 除了破解jQuery UI代碼外，我認為這與display: none非常接近display: none行為可言。
其他說明：
我已根據上述規則更新了選擇器，使其具有足夠的針對性，因為否則ID選擇器的特殊性將超過類選擇器的特殊性。
div的默認display值為block ，而不是inline 。
這是因為CSS首選項規則
考慮以下代碼：
#droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 20px; display: none; }
.droppable-highlight { display: inline; }
第一個是id選擇器，它比第二個（類選擇器）更具體。 將.droppable-highlight更改為#droppable.droppable-highlight將達到目的:)
您還需要對#droppable.ui-state-highlight進行相同的操作，因為放開時會刪除droppable-highlight類。
其次，當display:none元素display:none ，它在屏幕上不占空間，並且您不能“放下”它。 而是使用visibility
因此，最終代碼是：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Visual feedback</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<style>
#draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
#droppable { border-width: 3px; border-style: solid; border-color: #585FCC; height: 20px; visibility:hidden; }
#droppable.droppable-highlight { border-color: red; visibility:visible; }
#droppable.ui-state-highlight { border-color: red; visibility:visible; }
h3 { clear: left; }
</style>
<script>
$(function() {
$( "#draggable2" ).draggable();
$( "#droppable" ).droppable({
accept: "#draggable2",
activeClass: "droppable-highlight",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
<h3>Feedback on activating draggable:</h3>
<div id="draggable2" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" >
<p>Drop here</p>
</div>
</body>
</html>
當相鄰的 div 設置為 display:none 時如何為 div 的移動設置動畫
[英]how to animate movement of div when adjacent div is set to display:none
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.