1. 首頁
  2. 問答
  3. 自定義選擇香草JS

自定義選擇香草JS

2016-11-28 73 views
-1

自定義選擇香草JS

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>

有沒有辦法選擇一個選項後，以取代「.dropdown菜單」文本「選擇項」文本。就像如果我選擇選項4，那麼「選擇項目」將被替換爲「選項4」文本。 其實Stackoverflow的成員之一建議我使用這個輸入，所以我們可以存儲的價值。但他忘記了DD要改變文字。所以再次出現這個問題。

來源

2016-11-28 Anirban

+0

只需添加'下拉[0]。患兒[0] = .textContent裏面targ.textContent'你'如果（menu.contains（TARG））{...' – DavidDomain

+0

你也可以執行'targ.parentElement.parentElement.previousElementSibling.textContent = targ.textContent;'來確保定位當前選擇，以防萬一您有多個選擇。 – DavidDomain

+0

其實你是對的。如果我使用不同的ID創建2個或更多字段，它不起作用。如果我創建2字段，Box的下拉選項不起作用。 你能幫我一下嗎？ – Anirban

回答

0 

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; 
 
    dropdown[0].children[0].textContent = targ.textContent 
 
    } 
 
} 
 

 
// '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-28 08:42:09 Anirban

相關問題

 相關問題