【问题标题】:jQuery. A hard drop down menujQuery。硬下拉菜单
【发布时间】:2014-03-11 14:13:49
【问题描述】:

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 制作它的原因。如果您进入该网站(例如德语),您应该会在“dropmenu”中看到德语, 但它不会发生,因为我无法隐藏/显示它。到目前为止,它适用于英文版,因为第一个 div 不会隐藏(请参阅我的 jquery ),当我在两个标题中使用相同的脚本时问题就开始了。

任何帮助将不胜感激!谢谢。

【问题讨论】:

    标签: javascript jquery jquery-ui


    【解决方案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:我知道,不好看。

    【讨论】:

    • 正如你所说,这样做不是很好,但我很感激你的回答。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-05-27
    • 1970-01-01
    • 2016-01-06
    • 2011-11-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多