-4
基本上我想創建一個帶有標誌的語言下拉列表，並且默認爲德國。如何使用無序列表創建語言選擇下拉列表？
首先，創建一個div和內
- 的
img代表德國國旗和p標籤包含國名 - 然後
ul列表白衣，我隱藏與CSS等縣，所以德國國家是唯一默認顯示的國家
但是，這樣一旦其中一個國家被點擊，我就無法顯示其他國家;使用jquery。
所以我想要做的就是把所有語言中ul列表中的內容，但是這打破了我原來的風格
任何一個可以幫助我的風格，所以我可以知道我該怎麼讓德語li默認情況下，當有人點擊另一種語言，默認情況下更改與jQuery？
這裏是我的代碼至今：
body {
font-family: Arial, sans-serif;
background: #ddd;
font-weight: 300;
font-size: 15px;
color: #333;
-webkit-font-smoothing: antialiased;
}
.wrapper-country-dropdown {
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px 15px;
background: #f1f1f1;
cursor: pointer;
outline: none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.wrapper-country-dropdown:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #444 transparent;
}
.wrapper-country-dropdown .country-dropdown-list {
position: absolute;
top: 35px;
left: 0px;
right: 0px;
background: #f1f1f1;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
list-style: none;
opacity: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.wrapper-country-dropdown .country-dropdown-list li a {
display: block;
text-decoration: none;
color: #838383;
padding: 10px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.wrapper-country-dropdown .country-dropdown-list a > img{margin-left: 5px;
}
.flag-icon {
padding-right: 5px;
float: left;
}
p {
font-size: 16px;
display: inline;
}
/* Hover */
.wrapper-country-dropdown .country-dropdown-list li:hover a {
color: grey;
}
/* Active */
.wrapper-country-dropdown.active:after {
border-width: 0 6px 6px 6px;
}
.wrapper-country-dropdown.active .country-dropdown-list {
opacity: 1;
pointer-events: auto;
}<div class="container">
<div id="dd" class="wrapper-country-dropdown">
<img src="images/flage/england.png" class="flag-icon">
<p>England</p>
<ul class="country-dropdown-list">
<li>
\t \t <a href="#">
\t \t \t <img src="images/flage/england.png" class="flag-icon">
\t \t \t <p class="country-name">Germany</p>
\t \t </a>
\t </li>
\t <li>
\t \t <a href="#">
\t \t \t <img src="images/flage/germany.png" class="flag-icon">
\t \t \t <p class="country-name">England</p>
\t \t </a>
\t </li>
\t <li>
\t \t <a href="#">
\t \t \t <img src="images/flage/france.png" class="flag-icon">
\t \t \t <p class="country-name">France</p>
\t \t </a>
\t </li>
</ul>
\t
</div><!-- end wrapper country dropdown -->
\t </div><!-- enc container-->
你沒有添加任何代碼，芽。 –
爲什麼不使用'select'和'option'？我並不完全清楚下拉是什麼意思。 – Michelangelo
你希望選擇框中的選定值正確。 –