1. 首頁
  2. 問答
  3. 李作爲選擇項目使用香草的Javascript

李作爲選擇項目使用香草的Javascript

2016-11-27 44 views
0

李作爲選擇項目使用香草的Javascript

var dropdown = document.querySelectorAll('.dropdown'); 
 
var dropdownArray = Array.prototype.slice.call(dropdown,0); 
 
dropdownArray.forEach(function(el){ 
 
\t var button = el.querySelector('a[data-toggle="dropdown"]'), 
 
\t \t \t menu = el.querySelector('.dropdown-menu'), 
 
\t \t \t arrow = button.querySelector('i.icon-arrow'); 
 

 
\t button.onclick = function(event) { 
 
\t \t if(!menu.hasClass('show')) { 
 
\t \t \t menu.classList.add('show'); 
 
\t \t \t menu.classList.remove('hide'); 
 
\t \t \t arrow.classList.add('open'); 
 
\t \t \t arrow.classList.remove('close'); 
 
\t \t \t event.preventDefault(); 
 
\t \t } 
 
\t \t else { 
 
\t \t \t menu.classList.remove('show'); 
 
\t \t \t menu.classList.add('hide'); 
 
\t \t \t arrow.classList.remove('open'); 
 
\t \t \t arrow.classList.add('close'); 
 
\t \t \t event.preventDefault(); 
 
\t \t } 
 
\t }; 
 
}) 
 

 
Element.prototype.hasClass = function(className) { 
 
    return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className); 
 
};
.text-center { 
 
    text-align: center; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    -webkit-border-sizing: border-box; 
 
    -moz-border-sizing: border-box; 
 
    border-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 350px; 
 
    margin: 50px auto; 
 
} 
 
.container > ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0 0 20px 0; 
 
} 
 

 
.title { 
 
    font-family: 'Pacifico'; 
 
    font-weight: norma; 
 
    font-size: 40px; 
 
    text-align: center; 
 
    line-height: 1.4; 
 
    color: #2980B9; 
 
} 
 

 
.dropdown a { 
 
    text-decoration: none; 
 
} 
 
.dropdown [data-toggle="dropdown"] { 
 
    position: relative; 
 
    display: block; 
 
    color: white; 
 
    background: #2980B9; 
 
    -moz-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset; 
 
    -webkit-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset; 
 
    box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); 
 
    padding: 10px; 
 
} 
 
.dropdown [data-toggle="dropdown"]:hover { 
 
    background: #2c89c6; 
 
} 
 
.dropdown .icon-arrow { 
 
    position: absolute; 
 
    display: block; 
 
    font-size: 0.7em; 
 
    color: #fff; 
 
    top: 14px; 
 
    right: 10px; 
 
} 
 
.dropdown .icon-arrow.open { 
 
    -moz-transform: rotate(-180deg); 
 
    -ms-transform: rotate(-180deg); 
 
    -webkit-transform: rotate(-180deg); 
 
    transform: rotate(-180deg); 
 
    -moz-transition: -moz-transform 0.6s; 
 
    -o-transition: -o-transform 0.6s; 
 
    -webkit-transition: -webkit-transform 0.6s; 
 
    transition: transform 0.6s; 
 
} 
 
.dropdown .icon-arrow.close { 
 
    -moz-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    -moz-transition: -moz-transform 0.6s; 
 
    -o-transition: -o-transform 0.6s; 
 
    -webkit-transition: -webkit-transform 0.6s; 
 
    transition: transform 0.6s; 
 
} 
 
.dropdown .icon-arrow:before { 
 
    content: '\25BC'; 
 
} 
 
.dropdown .dropdown-menu { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.dropdown .dropdown-menu li { 
 
    padding: 0; 
 
} 
 
.dropdown .dropdown-menu li a { 
 
    display: block; 
 
    color: #6f6f6f; 
 
    background: #EEE; 
 
    -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset; 
 
    -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset; 
 
    box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset; 
 
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3); 
 
    padding: 10px 10px; 
 
} 
 
.dropdown .dropdown-menu li a:hover { 
 
    background: #f6f6f6; 
 
} 
 
.dropdown .show, 
 
.dropdown .hide { 
 
    -moz-transform-origin: 50% 0%; 
 
    -ms-transform-origin: 50% 0%; 
 
    -webkit-transform-origin: 50% 0%; 
 
    transform-origin: 50% 0%; 
 
} 
 
.dropdown .show { 
 
    display: block; 
 
    max-height: 9999px; 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    animation: showAnimation 0.5s ease-in-out; 
 
    -moz-animation: showAnimation 0.5s ease-in-out; 
 
    -webkit-animation: showAnimation 0.5s ease-in-out; 
 
    -moz-transition: max-height 1s ease-in-out; 
 
    -o-transition: max-height 1s ease-in-out; 
 
    -webkit-transition: max-height 1s ease-in-out; 
 
    transition: max-height 1s ease-in-out; 
 
} 
 
.dropdown .hide { 
 
    max-height: 0; 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    animation: hideAnimation 0.4s ease-out; 
 
    -moz-animation: hideAnimation 0.4s ease-out; 
 
    -webkit-animation: hideAnimation 0.4s ease-out; 
 
    -moz-transition: max-height 0.6s ease-out; 
 
    -o-transition: max-height 0.6s ease-out; 
 
    -webkit-transition: max-height 0.6s ease-out; 
 
    transition: max-height 0.6s ease-out; 
 
} 
 

 
@keyframes showAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(0.1); 
 
    -ms-transform: scaleY(0.1); 
 
    -webkit-transform: scaleY(0.1); 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@-moz-keyframes showAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(0.1); 
 
    -ms-transform: scaleY(0.1); 
 
    -webkit-transform: scaleY(0.1); 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@-webkit-keyframes showAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(0.1); 
 
    -ms-transform: scaleY(0.1); 
 
    -webkit-transform: scaleY(0.1); 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@keyframes hideAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    } 
 
} 
 
@-moz-keyframes hideAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    } 
 
} 
 
@-webkit-keyframes hideAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    } 
 
}
<div class="container"> 
 
    <ul> 
 
    <li class="dropdown"> 
 
     <a href="#" data-toggle="dropdown">Select Item <i class="icon-arrow"></i></a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">option 1</a></li> 
 
     <li><a href="#">option 2</a></li> 
 
     <li><a href="#">option 3</a></li> 
 
     <li><a href="#">option 4</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

下拉顯示效果還算不錯。但問題是因爲我想使用它而不是選擇標籤，所以我需要在選擇一個項目後最小化列表字段。而且我可以將數據作爲選擇項目工作。

*對不起英語不好。

來源

2016-11-27 Anirban

+1

這將是很好，如果你可以刪除代碼的某些部分，所以我們並不需要閱讀的一切，因爲大多數代碼是不是你的問題 –

回答

0

我真的很喜歡你的自定義下拉菜單，特別是你包含的CSS來給菜單的展開/摺疊動作提供一些動畫。我已經包含了你的代碼片段的修改版本，我希望你會發現它有幫助。我將解釋我在隨後的修改中所做的修改。

首先，讓我開始注意到我對HTML內容進行了一些小調整。特別是，我在整個下拉菜單標記之前包含了一個<input>字段，其​​中包含相應的<label>元素。已添加此信息可快速說明如何從選擇菜單中捕捉特定項目的值。現在，當您點擊其中一個下拉菜單的列表項目時，該項目的值將被插入到<input>字段中。

接下來，您可能會注意到我已將幾個class或id屬性添加到某些相關的HTML元素。這在很大程度上是爲了方便起見，並且通過適當的JavaScript選擇器來簡化它們的選擇。但是，一個重要的補充是在.dropdown-menu無序列表元素上使用的data-屬性。這是在正常的<select>表單輸入中看到的某種常見模式，其中一個添加了包含每個單元<option>元素的值的data-屬性（類似於所示的here）。我將在稍後簡短地簡述這一點。儘管看起來多餘，但爲開始和結束標記中的內容賦予一些data-屬性（或者替代地固定value屬性）提供了稍後引用相同值的簡單方法，而不必訴諸於innerHTML方法。有關data-attributes的更多信息，請參見MDN article。

首先要注意的事情是，我提出我的所有var聲明到腳本的最頂端。在原來的片段，你有三個獨立的變量聲明/ A forEach循環體中分配：

dropdownArray.forEach(function(el) { 
    var button = el.querySelector('a[data-toggle="dropdown"]'), 
     menu = el.querySelector('.dropdown-menu'), 
     arrow = button.querySelector('i.icon-arrow'); 
    /* Some more code follows... */ 
    });

這是我要指出的第一件事是可以改進的。具體而言，這並不令人滿意，因爲您實質上是在forEach循環的每次迭代中重新指定button,menu和arrow變量的值。因爲這些是固定引用DOM的固定元素，所以建議將這些引出到循環之外，並且最好將它們與最上面的兩個變量一起分組。您還會注意到，我已將var關鍵字替換爲ES6 const關鍵字。儘管這不會直接改變任何事情，但我強調這些是固定的（，即，const ant）對DOM元素的引用，並且可能不會被重新分配。

接下來，你會發現我寫了一個函數，clickHandler()，將被用作回調函數的事件偵聽器也會隨之而來。儘管直接編寫這個函數（，即，作爲事件監聽器的匿名函數和參數）是完全正確的，但爲了清晰起見，我已選擇將其解耦爲自己的空間。正如你原來所做的那樣，我也使用了preventDefault()方法，在這裏做爲函數體中的第一條語句。

如果您之前有14行代碼在menu和arrow元素上添加/刪除相應的類，我只有4個。理解這個過程很簡單。首先，最重要的是，沒有明確的需要將這些類別添加/刪除操作分配到if和/或else區塊。相反，您只需使用Element API的classList屬性上的toggle() method即可。但是，爲了使其正確運行，需要將HTML元素與適合初始狀態的CSS類別分別設爲.hide和.close。您會看到這反映在HTML標記中。

要使用此功能做的最後一件事是增加一個if條件檢查，如果用戶點擊的目標是，在事實上，下拉菜單的選擇框（即之一，<li>小號）。這可以通過各種方式完成，但最簡單的方法是使用Node API上的contains() method。爲此，我開始爲targ做一個let聲明（再一次，ES6語法），並將它分配給用戶點擊的DOM節點。 （我做了一個臨時變量來保存這個節點，這樣我們就不必在下面的代碼中多次提到它作爲evt.target;而且這是一個很好的實踐，並賦予了性能優勢，如果只是次要的，因爲JS引擎不必重複執行查找，而是可以將狀態中的固定值引用爲變量）。然後我用if的條件來指定，這裏用前面提到的的方法。所提供的條件表達式的值的二值（true或false）斷言targ是後代節點：所述.dropdown-menu無序列表（由menu變量給出）的（讀子元素）。如果是true，則<input>元素的值將被指定爲單擊的<li>元素上的data-optValue屬性的值。

let targ = evt.target; 
    if (menu.contains(targ)) { 
    selectionInput.value = targ.dataset.optvalue; 
    }

在目標不是menu後繼節點的情況下，它代表要的理由是，用戶要麼沒有單擊下拉菜單中的一個條目，或者它是button元素。注：作爲替代分配載自定義data-屬性的值<input>字段的值，一個也做如下圖所示：

if (evt.target !== selectMenu && evt.target !== button) { 
    selectionInput.value = evt.target.innerHTML; 
}

我會（至少從個人角度的視圖） ，請不要這樣做，因爲例如，如果您添加嵌套在下拉菜單的各個<li>標籤中的更多HTML內容，它可能會使事情變得複雜。

最後，我們總結添加一個簡單的事件處理程序。在這種情況下，我已將點擊事件附加到selectMenu元素（，即，頂級<ul>標記），並將上述clickHandler()函數作爲回調函數傳遞給它。

const selectMenu = document.querySelector('#custom-select'), 
 
     selectionInput = document.querySelector('#input-field'), 
 
     dropdown = document.querySelectorAll('.dropdown'), 
 
     dropdownArray = Array.prototype.slice.call(dropdown,0), 
 
     button = document.querySelector('a[data-toggle="dropdown"]'), 
 
     menu = document.querySelector('.dropdown-menu'), 
 
     arrow = button.querySelector('i.icon-arrow'); 
 

 
// Event callback function: 
 
function clickHandler(evt) { 
 
    evt.preventDefault(); 
 
    menu.classList.toggle('show'); 
 
    menu.classList.toggle('hide'); 
 
    arrow.classList.toggle('open'); 
 
    arrow.classList.toggle('close'); 
 
    
 
    let targ = evt.target; 
 
    if (menu.contains(targ)) { 
 
    selectionInput.value = targ.dataset.optvalue; 
 
    } 
 
} 
 

 
// 'Click' event registration: 
 
selectMenu.addEventListener('click', clickHandler, false); 
 

 

 

 
// Purely your code below: 
 
Element.prototype.hasClass = function(className) { 
 
    return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className); 
 
};
.text-center { 
 
    text-align: center; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    -webkit-border-sizing: border-box; 
 
    -moz-border-sizing: border-box; 
 
    border-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 350px; 
 
    margin: 50px auto; 
 
} 
 
.container > ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0 0 20px 0; 
 
} 
 

 
.title { 
 
    font: normal 40px/1.4 'Pacifico', sans-serif; 
 
    text-align: center; 
 
    color: #2980B9; 
 
} 
 

 
.dropdown a { text-decoration: none; } 
 
.dropdown [data-toggle="dropdown"] { 
 
    position: relative; 
 
    display: block; 
 
    color: white; 
 
    background: #2980B9; 
 
    -webkit-box-shadow: 0 1px 0 #409ad5 inset, 
 
         0 -1px 0 #20638f inset; 
 
    -moz-box-shadow: 0 1px 0 #409ad5 inset, 
 
         0 -1px 0 #20638f inset; 
 
    box-shadow:   0 1px 0 #409ad5 inset, 
 
         0 -1px 0 #20638f inset; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); 
 
    padding: 10px; 
 
} 
 
.dropdown [data-toggle="dropdown"]:hover { background: #2c89c6; } 
 
.dropdown .icon-arrow { 
 
    position: absolute; 
 
    display: block; 
 
    font-size: 0.7em; 
 
    color: #fff; 
 
    top: 14px; 
 
    right: 10px; 
 
} 
 
.dropdown .icon-arrow.open { 
 
    -webkit-transform: rotate(-180deg); 
 
    -moz-transform: rotate(-180deg); 
 
    -ms-transform:  rotate(-180deg); 
 
    transform:   rotate(-180deg); 
 
    -webkit-transition: -webkit-transform 0.6s; 
 
    -moz-transition: -moz-transform 0.6s; 
 
    -o-transition:  -o-transform 0.6s; 
 
    transition:   transform 0.6s; 
 
} 
 
.dropdown .icon-arrow.close { 
 
    -webkit-transform: rotate(0); 
 
    -moz-transform: rotate(0); 
 
    -ms-transform:  rotate(0); 
 
    transform:   rotate(0); 
 
    -webkit-transition: -webkit-transform 0.6s; 
 
    -moz-transition: -moz-transform 0.6s; 
 
    -o-transition:  -o-transform 0.6s; 
 
    transition:   transform 0.6s; 
 
} 
 
.dropdown .icon-arrow:before { content: '\25BC'; } 
 
.dropdown .dropdown-menu { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.dropdown .dropdown-menu li { padding: 0; } 
 
.dropdown .dropdown-menu li a { 
 
    display: block; 
 
    color: #6f6f6f; 
 
    background: #EEE; 
 
    -webkit-box-shadow: 0 1px 0 white inset, 
 
         0 -1px 0 #d5d5d5 inset; 
 
    -moz-box-shadow: 0 1px 0 white inset, 
 
         0 -1px 0 #d5d5d5 inset; 
 
    box-shadow:   0 1px 0 white inset, 
 
         0 -1px 0 #d5d5d5 inset; 
 
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3); 
 
    padding: 10px 10px; 
 
} 
 
.dropdown .dropdown-menu li a:hover { 
 
    background: #f6f6f6; 
 
} 
 
.dropdown .show, 
 
.dropdown .hide { 
 
    -webkit-transform-origin: 50% 0; 
 
    -moz-transform-origin: 50% 0; 
 
    -ms-transform-origin: 50% 0; 
 
    transform-origin: 50% 0; 
 
} 
 
.dropdown .show { 
 
    display: block; 
 
    max-height: 9999px; 
 
    -webkit-transform: scaleY(1); 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform:  scaleY(1); 
 
    transform:   scaleY(1); 
 
    -webkit-animation: showAnimation 0.5s ease-in-out; 
 
    -moz-animation: showAnimation 0.5s ease-in-out; 
 
    animation:   showAnimation 0.5s ease-in-out; 
 
    -webkit-transition: max-height 1s ease-in-out; 
 
    -moz-transition: max-height 1s ease-in-out; 
 
    -o-transition:  max-height 1s ease-in-out; 
 
    transition:   max-height 1s ease-in-out; 
 
} 
 
.dropdown .hide { 
 
    max-height: 0; 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    animation: hideAnimation 0.4s ease-out; 
 
    -moz-animation: hideAnimation 0.4s ease-out; 
 
    -webkit-animation: hideAnimation 0.4s ease-out; 
 
    -moz-transition: max-height 0.6s ease-out; 
 
    -o-transition: max-height 0.6s ease-out; 
 
    -webkit-transition: max-height 0.6s ease-out; 
 
    transition: max-height 0.6s ease-out; 
 
} 
 

 
@keyframes showAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(0.1); 
 
    -ms-transform: scaleY(0.1); 
 
    -webkit-transform: scaleY(0.1); 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@-moz-keyframes showAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(0.1); 
 
    -ms-transform: scaleY(0.1); 
 
    -webkit-transform: scaleY(0.1); 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@-webkit-keyframes showAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(0.1); 
 
    -ms-transform: scaleY(0.1); 
 
    -webkit-transform: scaleY(0.1); 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@keyframes hideAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    } 
 
} 
 
@-moz-keyframes hideAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    } 
 
} 
 
@-webkit-keyframes hideAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    } 
 
}
<div class="container"> 
 
    <label for='input-field'>Selection:&nbsp;</label> 
 
    <input type='text' id='input-field' value='' /> 
 
    <br /><br /> 
 
    
 
    <ul id='custom-select'> 
 
    <li class="dropdown"> 
 
     <a href="#" data-toggle="dropdown">Select Item 
 
     <i class="icon-arrow close"></i> 
 
     </a> 
 
     <ul class="dropdown-menu hide"> 
 
     <li><a href="#" data-optValue="Option 1">Option 1</a></li> 
 
     <li><a href="#" data-optValue="Option 2">Option 2</a></li> 
 
     <li><a href="#" data-optValue="Option 3">Option 3</a></li> 
 
     <li><a href="#" data-optValue="Option 4">Option 4</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

來源

2016-11-27 14:00:37 IsenrichO

+0

@IsenrichO嗨相關，謝謝你的細節。它確實幫助我理解了代碼。但問題是「選擇項目」文本不會被選定的選項文本取代。有沒有辦法用選項文本替換.dropdown [data-toggle =「dropdown」]文本？ – Anirban

+0

此外，您的代碼也不適用於多個選擇框。 – Anirban

相關問題

 相關問題