0

我正在尝试使用 css 和 jquery 创建一个组合框。我将拥有 3 个项目，我需要帮助来选择组合框中的项目并显示所选项目。任何帮助将不胜感激。我的完整代码是

http://jsfiddle.net/vmCBJ/

 $(function () {
        $('#clickIcon').click(function() {

        });
        $("ul.dropdown li").click(function () {
            $(this).addClass("hover");
            $('ul:first', this).css('visibility', 'visible');

        }, function () {

            $(this).removeClass("hover");
            $('ul:first', this).css('visibility', 'hidden');

        });

        $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");

    });


<div id="page-wrap">
    <span>
        <ul class="dropdown">
            <li><a href="#">Cannot</a>
                <ul class="sub_menu">
                    <li>
                        <a href="#">Can</a>
                    </li>
                    <li>
                        <a href="#">Must</a>
                    </li>

                </ul>
            </li>

        </ul>
    </span>
    <span id="clickIcon" style="background-color: gray;padding-left: 5px;font-weight: 900;">
        V
    </span>
</div>
4

2 回答 2

1

没有制作 StackOverflow，因此我们可以为您编写代码。你需要自己做一些研究。您需要做的不仅仅是显示列表中的哪个项目是“活动的”来制作一个正常工作的组合框。顺便说一句，组合框不是你所做的正确词。这更像是一个自定义下拉菜单。

我更新了您的代码（完全不在实时环境中使用代码）为您指明方向。http://jsfiddle.net/vmCBJ/1/

我做了什么：

    $(".sub_menu a").click(function () {
        var currentItem = $(this).text();
        $active = $('.dropdown a').first();
        $(this).text($active.text());
        $active.text(currentItem);

        return false;
    });

在子菜单中捕捉点击事件。将“单击”项中的文本保存在变量中。找到“活动”元素（子菜单之外的元素）并将文本交换为您单击“活动”的元素。

不过，这并不能真正弥补一个好的组合框:)

于 2013-05-22T09:09:42.783 回答
1

我的解决方案... http://jsfiddle.net/K2ndZ/

我已经对其进行了重建，因此功能应该相当清晰。但是，您应该知道，如果用户的浏览器上没有 javascript，此解决方案将会崩溃……下拉菜单不是更好的选择吗？

HTML

<div class="combobox">
    <div class="selector">Please select</div>
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
</div>

CSS

.combobox {cursor:pointer;display:inline-block;}
.combobox .selector{border:1px solid #cccccc;padding: 2px 5px}
.combobox ul {padding:0;margin:0;display:inline-block;border:1px solid #eeeeee;background-color:#cccccc;}
.combobox li {padding: 2px 5px}

jQuery

$(document).ready(function(){
    $('.combobox ul').hide();
    $('.combobox').hover(
        function(){
            $(this).find('ul').stop().slideDown();
        },
        function(){
            $(this).find('ul').stop().slideUp();
        }
    );
    $('.combobox li').click(function(){
        $(this).parents('.combobox').find('.selector').text($(this).text());
    });
});
于 2013-05-22T09:31:57.750 回答