我正在研究 jQuery 和拖放功能。我有一个 div，它在 CSS 中设置为 hidden。激活拖动元素时，应通过将 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
最佳答案
问题是 jQuery UI 代码没有在 droppable 隐藏时将类添加到 droppable(具有 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 的: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; }
如果您在开发工具中观看，该类永远不会被添加。显然，如果 droppable 不可见，jQuery UI 会忽略它。
您可能需要向 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 的元素仍然占用其布局空间。
您可以从布局中删除该元素而不使其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 行为一样接近。
其他说明:
我根据上述规则更新了选择器，因此它足够具体，否则 ID 选择器的具体性将超过类选择器的具体性。
div的默认display值为block，而不是inline。
关于javascript - 当显示设置为无时显示 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15875260/