Question

jQuery的：

   $(document).ready(function () {
         $('.ccm-multilingual-active-language').show();
         $('.dropdown_language:not(:first)').hide();
         $('.single_language a:not(:first)').css('border-top', '0');
         $('.dropdown_language').toggle(

         function () {
             $('.single_language:not(:first)').hide();
         },

         function () {
             $('.single_language:not(:first)').show();
         });
     });

HTML：

<div class = 'language selection'>
   <div class = 'ccm-multilingual-switch-language'>
       <div class="single_language">
         <a href="" class="ccm-multilingual-active-language">English</a>
         <div class="dropdown_language"></div>
   </div>
       <div class="single_language">
         <a href="" class="" style="border-top-width: 0px;">Deutsch</a>
         <div class="dropdown_language" style="display: none;"></div>
       </div>
   </div>
</div>

CSS：

.language_selection {
    font-size: 13px;
    float: right;
    margin-top: 10px;
    height: 15px;
    width: auto;
}

.language_selection a {
    border: 1px solid black;
    float: left;
    position: relative;
    width: 100px;
    text-align: center;
}
.single_language    {
    width: auto;
}

.dropdown_language  {
    height: 13px;
    width: 15px;
    border: 1px solid black;
    border-left: 0px !important;
    float: left;
    position: relative;
    display: inline;
}

对于小提琴，请点击here

我想制作一个自定义下拉菜单，这就是我使用div制作它的原因。如果你进入网站（例如deutsch语言），你应该在'dropmenu'中看到deutsch，但它不会发生，因为我无法隐藏/显示它。到目前为止，它适用于英语版本，因为第一个div不会隐藏（请参阅我的jquery），当我在两个标题中使用相同的脚本时问题就开始了。

任何帮助都会得到预防！谢谢。

Answer 1

我知道这不是最好的方法，但我会以这种方式进行下降：
HTML：

<nav class="language">
 <a id="languageSelected" href="javascript:void(0)"></a>
 <ul id="Listlanguage"></ul>
</nav>

JS：

switch(window.location.href.split('/')[4].substr(0,2)){
    case 'pt':
        $('#Listlanguage').append(
            '<li><a rel="en-us" href="/'+Site+'/en-us">en - us</a><li>'+
            '<li><a rel="'+LinkEsp.replace(/\s+/g, '')+'" href="/'+Site+'/'+LinkEsp.replace(/\s+/g, '')+'">'+LinkEsp+'</a><li>'             
        );          
    break;
    case 'en':
        $('#Listlanguage').append(
            '<li><a rel="pt-br" href="/'+Site+'/pt-br">pt - br</a><li>'+
            '<li><a rel="'+LinkEsp.replace(/\s+/g, '')+'" href="/'+Site+'/'+LinkEsp.replace(/\s+/g, '')+'">'+LinkEsp+'</a><li>'
        );
    break;
    case 'es':
        $('#Listlanguage').append(
            '<li><a rel="pt-br" href="/'+Site+'/pt-br">pt - br</a><li>'+
            '<li><a rel="en-us" href="/'+Site+'/en-us">en - us</a><li>'
        );
    break;
    default:
        $('#Listlanguage').append(
            '<li><a rel="pt-br" href="/'+Site+'/pt-br">pt - br</a><li>'+
            '<li><a rel="en-us" href="/'+Site+'/en-us">en - us</a><li>'+
            '<li><a rel="'+LinkEsp.replace(/\s+/g, '')+'" href="/'+Site+'/'+LinkEsp.replace(/\s+/g, '')+'">'+LinkEsp+'</a><li>'
        );
    break;
}

PS：我知道，看起来并不好看。

jQuery的。一个硬下拉菜单

1 个答案: