如何使用< ul>列表而不是< select>语言切换器的下拉菜单？ [英] How can I use <ul> list instead of <select> dropdown for the languages switcher?

问题描述

我使用 msDropDown 将< select> 转换为< ul> 语言切换器列表。但是问题是，使用这个jQuery插件，选择需要很长时间才能在页面加载之后加载。

那么，如何使用 ul 列表而不是选择？

这是我的选择代码：

 < select name =langclass =languageonchange =location.href ='index.php？lang ='+ THIS.VALUE + ''。$ trackpage。'> 
< option name =langdata-image =style / lang / de.pngvalue =de> Deutsch< / option> 
< option name =langdata-image =style / lang / en.pngvalue =enselected =selected>英文< / option> 
< option name =langdata-image =style / lang / es.pngvalue =es> Espanol< / option> 
< option name =langdata-image =style / lang / fr.pngvalue =fr> Francais< / option> 
< option name =langdata-image =style / lang / it.pngvalue =it> Italiano< / option> 
< / select> 
  

我尝试过：

 < ul onchange =location.href ='index.php？lang ='+ this.value +'> 
< li> 
< a href =name =langdata-image =style / lang / de.pngvalue =de>英文< / a> 
< / li> 
< / ul> 
  

但值和 ul 和 a 不支持> onchange 。

有没有办法使 ul 与选择属性配合使用？

谢谢！对不起我的坏英文！

解决方案

更新答案2015

由于这个问题仍然经常访问，由于评论中有一些要求，我重新访问了我的代码。您仍然可以在下面找到我的原始答案。

HTML

 < button class =language_selector>选择语言< / button> 
< ul class =languages> 
< li>< a href =/ en>英文< / a>< / li> 
< li>< a href =/ de> Deutsch< / a>< / li> 
< / ul> 
 
< article> 
< h1>更多内容< / h1> 
< / article> 
  

JavaScript

  var trigger = $（'。language_selector'）; 
 var list = $（'。languages'）; 
 
 trigger.click（function（）{
 trigger.toggleClass（'active'）; 
 list.slideToggle（200）; 
}）; 
 
 //这可以在新页面加载时关闭列表
 list.click（function（）{
 trigger.click（）; 
} ）; 
  

CSS

  .language_selector {
 width：200px; 
背景：＃222; 
颜色：#eee; 
 line-height：25px; 
 font-size：14px; 
 padding：0 10px; 
 cursor：pointer; 
} 
 
 .languages {
 display：none; 
 position：absolute; 
 margin：0; 
 background：#dddddd; 
} 
 
。语言> li {
 width：200px; 
背景：#eee; 
 line-height：25px; 
 font-size：14px; 
 padding：0 10px; 
 cursor：pointer; 
} 
 
。语言> li：hover {
 background：#aaa; 
} 
  

演示

尝试购买之前

---

原始答案从2013

我会这样做：

< pre class =snippet-code-js lang-js prettyprint-override> 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）{//更新代码选择当前语言选择.removeClass（'active'）; $（this）.addClass（'active'）; alert（location.href = 'index.php？lang =+ $（this）.attr（'data-value'））;}）;

  h2 {width：200px;背景：＃222;颜色：#eee; line-height：25px; font-size：14px; padding：0 10px; cursor：pointer;} ol.select {display：none;} ol.select> li {width：200px;背景：#eee; line-height：25px; font-size：14px; padding：0 10px; cursor：pointer;} ol.select> li：hover {background：#aaa;}  

 脚本src =https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js>< / script>< h2 id =nav>选择语言< / h2>< ol class =select> < li data-value =en>英文< / li> < li data-value =de> Deutsch< / li>< / ol>  

这个添加一个类所选元素。如果您在选择后留在该页面，并且不要使用 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

Try before buy

---

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.

这篇关于如何使用&lt; ul&gt;列表而不是&lt; select&gt;语言切换器的下拉菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！