CSS下拉對齊

Question

我想創建一個下拉菜單，當你點擊它時會打開一個ul。事情是我想要「查看更多」按鈕始終確切地位於它的位置，並在其下面打開下拉菜單。

如果你去下面的鏈接，你會明白我的意思。它打開完全像我想要的，但如果您通過單擊「查看更多」關閉下拉列表，您會看到標題向左移動，當我希望它保持在它所在的位置時

我正在構建能夠在許多不同的地點使用，因此「硬編碼」尺寸不是一種選擇。

請幫忙！ :)

HTML

<div id="testcontainer"> 

     <a href="javascript:;" class="dropdown-activator" dropdownContent="#dropdown-content-340"> 
      <span>View More!</span> 
     </a> 

     <ul class="dropdown-content" id="dropdown-content-340"> 
      <li><a href="http://www.google.com" class="googleIcon">Google</a></li> 
      <li><a href="http://www.yahoo.com" class="yahooIcon">Yahoo</a></li> 
      <li><a href="http://www.bing.com" class="bingIcon">Bing</a></li> 
     </ul> 


    </div> 

    <div id="testcontainer2"> 

     <a href="javascript:;" class="dropdown-activator" dropdownContent="#dropdown-content-350"> 
      <span>View More!</span> 
     </a> 

     <ul class="dropdown-content" id="dropdown-content-350"> 
      <li><a href="http://www.google.com" class="googleIcon">Google</a></li> 
      <li><a href="http://www.yahoo.com" class="yahooIcon">THIS IS A TEST FOR WIDER SHIT</a></li> 
      <li><a href="http://www.bing.com" class="bingIcon">Bing</a></li> 
     </ul> 

    </div> 

    <div id="testcontainer3"> 

     <a href="javascript:;" class="dropdown-activator" dropdownContent="#dropdown-content-400"> 
      <span>View More!</span> 
     </a> 

     <ul class="dropdown-content" id="dropdown-container-400"> 
      <li><a href="http://www.google.com" class="googleIcon">GOOOOOOOOOOOOOOOOOOOOOGLEASDASDSASD</a></li> 
      <li><a href="http://www.yahoo.com" class="yahooIcon">Yahoo</a></li> 
      <li><a href="http://www.bing.com" class="bingIcon">Bing</a></li> 
     </ul> 

    </div> 

CSS

#testcontainer { 
position: absolute; 
top: 20px; 
left: 100px; 
text-align: center; 
} 

#testcontainer2 { 
position: absolute; 
top: 20px; 
left: 150px; 
text-align: center; 
} 

#testcontainer3 { 
position: absolute; 
top: 200px; 
left: 500px; 
text-align: center; 
} 

.dropdown-activator-active { 
background-color: #000; 
color: #fff; 
} 

.dropdown a { 
display: inline-block; 
} 

.dropdown-activator { 
display: inline-block; 
border: 1px solid black; 
padding: 3px; 
} 


.dropdown-content { 
visibility: hidden; 
height: 0; 
opacity: 0; 
position: relative; 
text-align: left; 
margin: 0 auto; 
border: 1px solid black; 
} 

.dropdown-content-active { 
visibility: visible; 
height: auto; 
opacity: 1; 
} 

.dropdown-content ul li { 
list-style: none; 
} 

JQuery的

$(function(){ 

$(".dropdown-activator").click(function() { 
    $this = $(this); 
    var current = $this.attr('dropdownContent'); 
    if (!$(current).hasClass('dropdown-content-active')) { 
     $this.addClass("dropdown-activator-active", 100); 
     $(current).addClass('dropdown-content-active', 100, function() { 
      $('html').unbind('click'); 
      $('html').not($this).one('click', function() { 
       $(current).prev().removeClass("dropdown-activator-active", 100); 
       $(current).removeClass('dropdown-content-active', 100); 
      }); 
     }); 
    } else { 
     $this.removeClass("dropdown-activator-active", 100); 
     $(current).removeClass('dropdown-content-active', 100) 
    } 
}); 
}); 

，你可以看到在這裏www.chrisworrell.com（臨時）

Answer 1

爲例display: none; r從文檔流中刪除元素，這就是爲什麼您的父母div調整大小。另一方面，visibility: hidden;將您的元素隱藏在文檔流中。

你可以做什麼，而不是你操縱元素<ul>的顯示屬性設置visibility: hidden;和height: 0;這樣，未展開的鏈接會繼續使用它是捆綁在一起的UL元素的寬度。

這是一種哈克，但應該完成工作。

爲了操作的可視性，而不是使用jQuery UI顯示無，使用.animate({opacity: 1})爲淡入（）和.animate({opacity: 0})的淡出（）