将显示设置为无时显示div

我在玩jQuery和拖放功能。我有一个div在CSS中设置为hidden。当激活拖动元素时，应通过将display设置为inline（这是默认值）来显示droppable元素。将显示设置为无时显示div

然而，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

来源

2013-04-08 Devator

这是因为ID选择是更具体的比类选择（因此需要更高的优先级）。你将不得不通过'.css（）'方法来设置它。 – Terry 2013-04-08 09:09:56

@Terry你能告诉我这是怎么完成的吗？我想在'droppable（）'部分。我对此很新。 – Devator 2013-04-08 09:12:02

@Devator：据我所知，问题在于这个类没有被添加（我只是为了这个实验处理了特殊性问题 - 将CSS规则的选择器更改为了＃＃droppable.droppable-highlight '）。但是看着Chrome的开发工具中的元素，我没有看到这个类被添加到droppable中，尽管在文档中我认为应该发生什么。 – 2013-04-08 09:15:08

的问题是，当可放开隐藏在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再次：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元素仍然消耗它们的布局空间问题。

您可以删除布局元素没有使它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选择的特异性outrules类选择的特异性。
div的默认display值是block而不是inline。

来源

2013-04-08 09:25:06

感谢您的全面解答。你知道**任何**解决方法来使'display'工作，而不是'visibility'？设置完全不同的课程不是问题。 – Devator 2013-04-08 10:30:38

@Devator：我确实想出了一个更进一步的想法，我已经将它添加到答案中。它应该在功能上与'display：none'用户体验相同，即使该元素从未实际隐藏（只是关闭页面）。 – 2013-04-08 10:35:29

干杯，更好的工作:-)然而有一个（次要）的问题，因为这个。看看[这个链接]（http://tinker.io/bf197/6）。当你拖动'div'时，你会看到'div'向下移动，所以鼠标的位置不再准确。在我的应用程序中这是一个相当的问题。你有什么聪明的想法来解决这个问题吗？ – Devator 2013-04-08 10:49:26

这是因为CSS preference rules

考虑下面的代码：

#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-highlight类已被除去#droppable.ui-state-highlight这样做。

其次，当一个元素是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>

http://tinker.io/bf197/4

来源

2013-04-08 09:25:19 Manishearth

感谢您的回答！虽然我真的在寻找'display'而不是'visibility''（因为'visibility'仍然占用布局空间）。 – Devator 2013-04-08 10:31:29

@Devator：然后使用绝对定位。 – Manishearth 2013-04-08 11:55:48

将显示设置为无时显示div

回答

相关问题