jQuery的。 硬下拉菜单

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;
}

For fiddle click here

I want to make a custom dropdown menu so that's why I'm making it with divs. If you get on the site(deutsch language for example), you should see deutsch in the 'dropmenu', but it doesn't happen because I can't hide/show it. For so far it works on the english one, because the first div won't hide( see my jquery for this ), the problem begins when I use the same script in boths headers.

Any help would be preciated! Thank you.

Answer 1

I know this is not the best way to do, but I'm moving in a dropmenu this way:
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: I know, it's not pretty to see.