html - 下拉菜单类别/子类别

Question

我想做的是将下拉菜单分开。在这个例子中有五个选项我怎样才能将下拉列表分成几类？例如，选项 1 和 2 从环境类别中弹出，选项 3 和 4 体育类别和 5 大学类别？ http://jsfiddle.net/fc3550sk/

例如:

下拉:单击时请选择菜单将是环境、体育、大学..然后将鼠标悬停在环境上，它会让您从选项 1 或 2 中进行选择...或者将鼠标悬停在运动上，它会让您从选项 3 或 4 中进行选择，依此类推..

这是我目前所拥有的:

      <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');
        });
    });

任何帮助将不胜感激!!

Answer 1

我不知道有什么方法可以将“悬停”事件监听器附加到标准下拉菜单，但使用 jquery、html 和 css 实现您自己的自定义下拉菜单并没有太多工作。

自定义下拉优势#01

您可以根据需要为每个条目分配任意数量的自定义值。

在您的示例中，您有“Specialty Plates”，您可能想要指定价格、分配给该板的特殊代码、分配给该板的图像等等。使用 HTML/jQuery 版本，您可以使用简单的 <span> 创建自定义下拉菜单像这样的标签:

<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>

请注意每个条目如何分配三个自定义值:data-code、data-image 和 data-price。如果你使用 html 下拉菜单，你就没有那么多的自由。有一些方法可以扩展与标准下拉菜单关联的值，但获取这些值很麻烦，而且您仍然无法访问您的功能所需的悬停行为。

自定义下拉优势#02

您实际上可以以任何您想要的方式使用悬停行为。

在您的示例中，您希望在选择下拉列表中的某些值时显示“子菜单”，但据我所知，没有办法访问“悬停”的值"在标准下拉列表中寻找仅 HTML 的解决方案是不存在的，因此您将不得不以一种或另一种方式使用 javascript。

使用 jQuery，您可以像这样轻松获取自定义下拉元素中的值:

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

我对你问题的解决方案

为了将这些想法付诸实践，我整理了一个简单的演示，演示如何使用您的应用程序参数创建自定义下拉菜单。

You can review a jsfiddle of the demo here.

基本思想是在 html 中创建一个层次结构，其中包含 div .drop_down_scroll_container 中的顶级选项(环境、体育、大学)的结构。 ，然后将所有子级 div(环境 01、环境 02 等)放在该 div 下的分类为 .dropdown-subcategory 的 div 中.神奇之处在于 javascript 查找顶级选项的索引，然后显示 dropdown-subcategory。具有相同的索引。

例如，在下面的 html 片段中，您可以看到 drop_down_scroll_container 中每个跨度的索引位置。分区:

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

那么，当您将鼠标悬停在任何这些顶级选项(环境、体育、大学)上时，您可以要求 jQuery 显示相应的子菜单 div，它们位于 .drop_down_scroll_container 下方。类别为 .dropdown-subcategory 的 div 容器中的 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>

如果这些都没有任何意义，这是另一种看待它的方式:

当 .drop_down_scroll_container 中的第一项时悬停时，jQuery 查找 .dropdown-subcategory 的第一个实例在它下面。当 .drop_down_scroll_container 中的第二项时悬停，然后 jQuery 将显示 .dropdown-subcategory 的第二个实例， 等等。这使您可以根据需要构建尽可能多的选项，而不必担心为所有内容指定特定名称，在这种情况下只有顺序很重要。因此，当“环境”选项(谁的索引等于 0)悬停时，.dropdown-subcategory索引为 0将会呈现。这是基本思想。

现在让 jQuery 把它们放在一起:

$(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));
    });

});

注意:可能已经有一些开源解决方案以更优雅的方式解决了这个问题。但这是我解决此类问题的方法。如您所见，只需进行一些设置即可开始。您可以轻松地在 css 中控制下拉菜单的样式，您可以扩展它来做任何你想做的事情。

Again, you can review a jsfiddle to see all of this code in action here.

希望这对您有所帮助!