JavaScript / JQuery Combo类似下拉菜单问题

JavaScript/JQuery Combo like drop down menu issues

本文关键字：下拉菜单 问题 Combo JQuery JavaScript      更新时间：2023-09-26

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

演示

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

试试这个：

$(".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 部分，您可以使用文本缩进：

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

这就是您所需要的：

演示小提琴 

$(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();
    });
});
相关文章：