Question

我想知道是否有人可以调整我的代码以获得我正在寻找的功能。我在这里遗漏了一些东西。我快到了。问题是当从列表中选择菜单项时，它不会向上移动而是重复。然后，如果我再次点击此菜单，那么我将在菜单中获得两个相同的项目。理想情况下，我需要将所选菜单项移到顶部，并且菜单中没有任何重复的内容。请在here中查看jsfiddle的工作原型：

DEMO

我也想知道你是否可以将菜单项中的文本放在中间位置，左边距为10px。我试图做到这一点，但这并不容易。非常感谢提前。

Answer 1

试试这个：

$(".dropdown dd ul li a").click(function() {
    $(".dropdown dd ul li a").css("display", "block");
    var text = $(this).html();
    $(this).css("display", "none");
    $(".dropdown dt a span").html(text);
    $(".dropdown dd ul").hide();
    $("#result").html("Selected value is: " + getSelectedValue("sample"));
});

http://jsfiddle.net/DAgGP/3/

对于css部分，您可以使用text-indent：

.dropdown dd ul li a {
   text-indent: 10px;
}

Answer 2

这就是你所需要的：

demo Fiddle

$(document).ready(function() {

    var temp = '';

    $('.dropdown dt:eq(0)').on('click',function(){
        $('.dropdown dd ul').toggle();
    });

    $('dl.dropdown li').on('click',function(){
        $thisA = $('a', this);
        temp = $thisA.text();
        $thisA.closest('li').hide().siblings('li').show();
        $('.dropdown span').text(temp);
        $('.dropdown dd ul').hide();
    });

});

JavaScript / JQuery Combo就像下拉菜单问题一样

2 个答案:

demo Fiddle