javascript - jQuery一个div，两个url，用css做一个选择框

Question

正如标题所说，我得到一个包含 2 个 url 的 div (a)。我想使用 jQuery 制作选择框而不触及 html，只使用 css 和脚本。有人可以帮帮我吗？

我在想这样的代码(我知道它行不通):

$(document).ready(function(){
            $('.language_selection a:last-child').hide();
            $('.language_selection').hover({
                $(this).show();
            });
        })

;

Answer 1

不确定您要的是什么，但可能是这样的:

HTML:

 <div class="language_selection">
     <a href="#EN">EN</a>
     <a href="#FR">FR</a>
 </div>

CSS:

.language_selection a{
    display:none;
}

.language_selection .selected {
    display:block;
    color:red;
}

JS:

$(document).ready(function(){

    $('.language_selection a:first').addClass('selected');

    $('.language_selection a').click(function() {
        $('.language_selection a').removeClass('selected');
        $(this).addClass('selected');
    });

    $('.language_selection').hover(function(){
        $(this).find('a').css('display', 'block');
    }, function(){
        $(this).find('a').not('.selected').hide();
    });

});

FIDLE DEMO

如果您可以使用 javascript 修改您的 html，另一种方法(可能更好)是将链接替换为真正的 select 标记:

var select = $('<select></select>');
$('.language_selection a').each(function () {

    var option = $('<option></option>');
    option.val($(this).attr('href')).text($(this).text())
    select.append(option);
});
$('.language_selection').html(select);

FIDDLE DEMO