將顯示設置爲無時顯示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

回答

相關問題