我如何使用 <ul>列表而不是 <select>语言切换器的下拉菜单? [英] How can I use <ul> list instead of <select> dropdown for the languages switcher?
问题描述
我使用 msDropDown 将 转换为语言切换器的
那么，我如何使用 ul 列表而不是 select ?
这是我的选择代码:
我尝试过:
<li><a href="" name="lang" data-image="style/lang/de.png" value="de">English</a>
但是value和onchange不被ul和a支持.
有没有办法让 ul 与 select 属性一起工作?
谢谢！抱歉我的英语不好！
Updated Answer 2015
由于这个问题仍然经常被访问，并且由于评论中的一些请求，我重新访问了我的代码.您仍然可以在下面找到我的原始答案.
HTML
;<ul class="languages"><li><a href=/en">英语</a></li><li><a href=/de">Deutsch</a></li><文章><h1>更多内容</h1></文章>JavaScript
var trigger = $('.language_selector');var list = $('.languages');触发器.点击(功能(){trigger.toggleClass('active');list.slideToggle(200);});//在加载新页面时关闭列表是可选的列表.点击(功能(){触发器.点击()；});CSS
.language_selector {宽度:200px；背景:#222；颜色:#eee;行高:25px；字体大小:14px；填充:0 10px；光标:指针；}.languages {显示:无；位置:绝对；边距:0；背景:#dddddd；}.语言>李{宽度:200px；背景:#eee;行高:25px；字体大小:14px；填充:0 10px；光标:指针；}.语言>李:悬停{背景:#aaa;}演示
<小时>2013 年的原始答案
我会这样做:
var nav = $('#nav');var selection = $('.select');var select = selection.find('li');导航点击(功能(事件){如果 (nav.hasClass('active')) {nav.removeClass('active');selection.stop().slideUp(200);} 别的 {nav.addClass('active');selection.stop().slideDown(200);}event.preventDefault();});选择.点击(功能(事件){//更新代码以选择当前语言select.removeClass('active');$(this).addClass('active');alert("location.href = 'index.php?lang=" + $(this).attr('data-value'));});h2 {宽度:200px；背景:#222；颜色:#eee;行高:25px；字体大小:14px；填充:0 10px；光标:指针；}ol.select {显示:无；}ol.select >李{宽度:200px；背景:#eee;行高:25px；字体大小:14px；填充:0 10px；光标:指针；}ol.select >李:悬停{背景:#aaa;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><h2 id="nav">选择语言</h2><ol class="选择"><li data-value="en">英语</li><li data-value="de">Deutsch</li>这个给被选元素添加了一个类.如果您在选择后停留在那个页面上并且不使用 location.href.
I use msDropDown to convert the <select> to <ul> list for languages switcher. But the problem is that with this jQuery plugin, the select takes a long time to load after page loaded.
So, how can I use a ul list rather than select?
This is my select code:
<select name="lang" class="language" onchange="location.href='index.php?lang='+this.value+''.$trackpage.'">
<option name="lang" data-image="style/lang/de.png" value="de">Deutsch</option>
<option name="lang" data-image="style/lang/en.png" value="en" selected="selected">English</option>
<option name="lang" data-image="style/lang/es.png" value="es">Espanol</option>
<option name="lang" data-image="style/lang/fr.png" value="fr">Francais</option>
<option name="lang" data-image="style/lang/it.png" value="it">Italiano</option>
</select>
I tried with:
<ul onchange="location.href='index.php?lang='+this.value+'">
<li>
<a href="" name="lang" data-image="style/lang/de.png" value="de">English</a>
</li>
</ul>
but value and onchange is not supported by ul and a.
Is there a way to make ul works with the select attributes?
Thank you! And sorry for my bad English!
Updated Answer 2015
As this question is still visited very often and due to some requests in the comments, I've revisit my code. You can still find my original answer below.
HTML
<button class="language_selector">Choose Language</button>
<ul class="languages">
<li><a href="/en">English</a></li>
<li><a href="/de">Deutsch</a></li>
</ul>
<article>
<h1>More Content</h1>
</article>
JavaScript
var trigger = $('.language_selector');
var list = $('.languages');
trigger.click(function() {
trigger.toggleClass('active');
list.slideToggle(200);
});
// this is optional to close the list while the new page is loading
list.click(function() {
trigger.click();
});
CSS
.language_selector {
width: 200px;
background: #222;
color: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
.languages {
display: none;
position: absolute;
margin: 0;
background: #dddddd;
}
.languages > li {
width: 200px;
background: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
.languages > li:hover {
background: #aaa;
}
Demo
Original Answer From 2013
I would do it like this:
var nav = $('#nav');
var selection = $('.select');
var select = selection.find('li');
nav.click(function(event) {
if (nav.hasClass('active')) {
nav.removeClass('active');
selection.stop().slideUp(200);
} else {
nav.addClass('active');
selection.stop().slideDown(200);
}
event.preventDefault();
});
select.click(function(event) {
// updated code to select the current language
select.removeClass('active');
$(this).addClass('active');
alert ("location.href = 'index.php?lang=" + $(this).attr('data-value'));
});
h2 {
width: 200px;
background: #222;
color: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
ol.select {
display: none;
}
ol.select > li {
width: 200px;
background: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
ol.select > li:hover {
background: #aaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h2 id="nav">Choose Language</h2>
<ol class="select">
<li data-value="en">English</li>
<li data-value="de">Deutsch</li>
</ol>
This one adds a class the the selected element. This works, if you stay on that very page after the select and don't use location.href.
这篇关于我如何使用 <ul>列表而不是 <select>语言切换器的下拉菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
