_索引！=索引）{ $（this.hide（）； } } ); } //当任何菜单项悬停时 $（“span”）。悬停( 函数（）{ $（“.hoveredOver”）.text（$（this.text（））； }, 函数（）{ $（“.hoveredOver”）.text（“”）； } ); //单击子菜单选项时 $（“.dropdown子类别span”）。单击（函数（）{ $（“.dropdown子类别span”）.removeClass（“选定”）； $（“.clickedOption”）.text（$（this.text（））； $（此）.addClass（“选定”）； $（this.parent（）.parent（）.find（“.selectHeader”）.text（$（this.text（））； 关闭下拉列表（$（this.parent（）.parent（））； showSpecialPlateModal（$（this.text（），$（this.attr）（“数据图像”），$（this.attr（“数据价格”），$（this.attr（“数据代码”）； }); //关闭divToSearch中包含的下拉列表 功能关闭下拉列表（divToSearch）{ divToSearch.find（“.drop\u down\u scroll\u container”）.fadeOut（）； divToSearch.find（“.dropdown子类别”）.fadeOut（）； }; //填充并启动引导模式对话框 函数showSpecialPlateModal（名称、图像、价格、代码）{ $（'modal_special'）。查找（'modal body'） .html（“”+名称+“”） .append（“特殊车牌代码：“+Code+”） .append（“

图像将转到此处：

”） .append（“

Price:”+Price+“
”） .end（）.modal（'show'）； } //当按下模式“接受”按钮时 $（'.accept'）。在（'click'，function（）上{ var modal_element=$（“#modal_special”）； var name=modal_element.find（“h2”）.text（）； var price=modal_element.find（“span.price”）.text（）； var code=modal_element.find（“span.code”）.text（）； $（“#modal_special”）.modal（'hide'）.end（为“+price”的价格选择了警报（name+”）； }); });

注意：可能已经有一些开源解决方案以更优雅的方式解决了这个问题。但这是我解决这样一个问题的方法。正如你所看到的，只需要一点点的设置就可以开始了。您可以轻松地控制css中下拉列表的样式，并且可以扩展它来执行任何您想要的操作

---

希望这有帮助

为什么不使用菜单插件？或者用自定义div模拟下拉菜单的行为？只需在jquery菜单插件上快速搜索即可。你可能会找到你需要的。如果你使用一个插件，你需要添加一个对它的引用，并以它应该的方式实现它。通常，插件会附带一些文档来向您展示如何使用它。该插件可能会使用li或div。您无法将所选内容转换为菜单。引导菜单是一个具有两个级别的单击菜单，有一些引导菜单具有两个以上的级别。如果您想支持触摸设备，悬停不是一个好主意。这里有一个您可以使用的组件：它是一个实际的html选择输入，还是一个感觉像下拉列表的自定义组件，这很重要？因为我知道用自定义组件复制此功能的方法（全部在jquery中完成），但据我所知，您无法获取标准下拉列表的“突出显示”值，以在所有浏览器中都支持的方式执行自定义功能（注意我是如何说“突出显示”而不是“选中”）。因此，如果您愿意，我很高兴向您展示jquery中的自定义组件解决方案。

      <select name="SPECIAL" id="SPECIAL">
  <option>Please Select</div>
    <option data-img="/images/img/AnimalFriend.png" value="1">AnimalFriend</option>
    <option data-img="/images/img/Aquaculture.png" value="2">Aquaculture</option>
    <option data-img="/images/img/ProtectOurOceans.png" value="3">Protect Our Oceans</option>
    <option data-img="/images/img/ConserveWildlife.png" value="4">Conserve Wildlife</option>
          </select>
      <!-- Modal -->
<div class="modal fade" id="modal_special" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Specialty Plate</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary accept">Accept</button>
      </div>
    </div>
  </div>
</div>

$(function() {
        $('#SPECIAL').on('change', function() {
            if ($('option:selected', this).is('[data-img]')) {
                $('#modal_special').find('.modal-body').html('<p>Image will go here:</p>')
                .append('<img alt="coming soon" src="' + $('option:selected', this).data('img') + '"/>')
                .end().modal('show');
            }
        });
        $('.accept').on('click',function() {
            //do something
            $('#modal_special').modal('hide');
        });
    });

<span data-code="SPRT01" data-image="" data-price="34.00">Sports 01</span>
<span data-code="SPRT02" data-image="" data-price="35.00">Sports 02</span>
<span data-code="SPRT03" data-image="" data-price="36.00">Sports 03</span>

$("span").hover(
    function(){
        var text = $(this).text();
        console.log("You have hovered on: ", text); 
    }, 
    function(){
        // You have hovered off the span        
    }
);

<div class="drop_down_scroll_container">
   <span>Environment</span> <!-- index 0 -->
   <span>Sports</span>      <!-- index 1 -->
   <span>Colleges</span>    <!-- index 2 -->
</div>

<div id="dropdown" class="specialtyPlatesCategories">

    <div class="selectHeader">Click to Select Plates:</div>

    <!-- THIS IS WHERE YOU WILL PUT YOUR TOP-LEVEL OPTIONS -->
    <div class="drop_down_scroll_container">
        <span>Environment</span>
        <span>Sports</span>
        <span>Colleges</span>
    </div>

    <!-- THIS DIV IS AT INDEX 0 of: #dropdown.dropdown-subcategory  -->
    <!-- Will fade in when the drop_down_scroll_container index 0 is hovered -->
    <div id="env_subcategories" class="dropdown-subcategory">
           <span data-code="ENV01" data-image="" data-price="31.00">Environment 01</span>
       <span data-code="ENV02" data-image="" data-price="32.00">Environment 02</span>
       <span data-code="ENV03" data-image="" data-price="33.00">Environment 03</span>
    </div>

    <!-- THIS DIV IS AT INDEX 1 of: #dropdown.dropdown-subcategory  -->
    <!-- Will fade in when the drop_down_scroll_container index 1 is hovered -->
    <div id="sports_subcategories" class="dropdown-subcategory">
       <span data-code="SPRT01" data-image="" data-price="34.00">Sports 01</span>
       <span data-code="SPRT02" data-image="" data-price="35.00">Sports 02</span>
       <span data-code="SPRT03" data-image="" data-price="36.00">Sports 03</span>
    </div>

    <!-- THIS DIV IS AT INDEX 2 of: #dropdown.dropdown-subcategory  -->
    <!-- Will fade in when the drop_down_scroll_container index 2 is hovered -->
    <div id="colleges_subcategories" class="dropdown-subcategory">
       <span data-code="COLL01" data-image="" data-price="37.00">Colleges 01</span>
       <span data-code="COLL02" data-image="" data-price="38.00">Colleges 02</span>
       <span data-code="COLL03" data-image="" data-price="39.00">Colleges 03</span>
    </div>

</div>

$(document).ready(function(){

    // When the header for the custom drop-down is clicked
    $(".selectHeader").click(function() {

        // cache the actual dropdown scroll container
        var dropdown = $(this).parent().find(".drop_down_scroll_container");

        // Toggle the visibility on click
        if (dropdown.is(":visible")) {
            dropdown.slideUp();
            $(this).parent().find(".dropdown-subcategory").fadeOut();
        } else {
            dropdown.slideDown();
        }

    });

    // When a top-level menu item is hovered, decide if its
    // coorespnding submenu should be visible or hidden
    $(".drop_down_scroll_container span").hover(

        // hover on
        function() {

            // Remove the "highlighted class from all other options
            $(this).parent().find("span").removeClass("highlighted").removeClass("selected");
            $(this).addClass("highlighted").addClass("selected");

            // Get the index of the hovered span
            var index = $(this).index();

            // Use the hovered index to reveal the 
            // dropdown-subcategory of the same index
            var subcategorydiv = $(this).parent().parent().find(".dropdown-subcategory").eq(index);
            hideallSubmenusExceptMenuAtIndex($(this).parent().parent(), index);
            subcategorydiv.slideDown();
        },

        // hover off
        function() {
            if (!$(this).hasClass("highlighted")) {
                var index = $(this).index();
                var subcategorydiv = $(this).parent().parent().find(".dropdown-subcategory").eq(index);
                subcategorydiv.slideUp();
            }
    });

    // Hide all submenu items except for the submenu item at _index
    // This will hide any of the previously opened submenu items
    function hideallSubmenusExceptMenuAtIndex(formElement, _index) {
        formElement.find(".dropdown-subcategory").each(
            function(index) {
                if (_index != index) {
                    $(this).hide();
                }
            }
        );
    }

    // When any menu item is hovered
    $("span").hover(
        function() {
            $(".hoveredOver").text($(this).text());
        },
        function() {
            $(".hoveredOver").text("");
        }
    );


    // When a sub-menu option is clicked
    $(".dropdown-subcategory span").click(function() {
        $(".dropdown-subcategory span").removeClass("selected");
        $(".clickedOption").text($(this).text());
        $(this).addClass("selected");
        $(this).parent().parent().find(".selectHeader").text($(this).text());
        closeDropDown($(this).parent().parent());
        showSpecialPlateModal($(this).text(), $(this).attr("data-image"), $(this).attr("data-price"), $(this).attr("data-code"));
    });

    // Close the dropdowns contained in divToSearch
    function closeDropDown(divToSearch) {
        divToSearch.find(".drop_down_scroll_container").fadeOut();
        divToSearch.find(".dropdown-subcategory").fadeOut();
    };

    // Populate and Launch the bootstrap Modal Dialog Specialty Plates 
    function showSpecialPlateModal(name, image, price, code) {
      $('#modal_special').find('.modal-body')
        .html('<h2>' + name + '</h2>')
        .append('<br/>Special Plate Code: <span class="code">' + code + '</span><br/>')
        .append('<p>Image will go here:</p><br/><img alt="" src="' + image + '"/>')
        .append('<br/><br/>Price: <span class="price">' + price + '</span><br/>')
        .end().modal('show');
    }

    // When the modal "Accept" button is pressed
    $('.accept').on('click', function() {
        var modal_element = $('#modal_special');
        var name = modal_element.find("h2").text();
        var price = modal_element.find("span.price").text();
        var code = modal_element.find("span.code").text();
        $('#modal_special').modal('hide').end(alert(name + " was selected for a price of " + price));
    });

});