Question

我从http://css-tricks.com/convert-menu-to-dropdown获得了以下代码，该代码非常适合将标准导航转换为选择菜单。我想知道如何为子菜单添加条件。例如，这是WordPress导航创建的默认html ...

<ul id='menu-collections'>
  <li><a href='http://...'>blah</a>
    <ul class='sub-menu'>
      <li><a href='http://...'>blah</a></li>
    </ul>
  </li>
</ul>

一个让事情变得更轻松的JS小提琴 - http://jsfiddle.net/eaDLX/

我想要做的是在每个具有一类子菜单的ul前面加上' - '，这样我的列表就像这样......

选择一个选择......

编辑（这将是父母）

- 1920年代收藏（这将是孩子）

- Baulmer Collection

等...

我确信这样做很简单，但我无法实现逻辑上的飞跃。有人可以帮忙吗？感谢

        // Create the dropdown base

        $("<select />").appendTo("nav#menu-collections");

        // Create default option "Go to..."
        $("<option />", {
           "selected": "selected",
           "value"   : "",
           "text"    : "Choose a Collection..."
        }).appendTo("nav#menu-collections select");

        // Populate dropdown with menu items
        $("nav#menu-collections a").each(function() {
         var el = $(this);
         $("<option />", {
             "value"   : el.attr("href"),
             "text"    : el.text()
         }).appendTo("nav#menu-collections select");
        });

        $("nav#menu-collections select").change(function() {
         window.location = $(this).find("option:selected").val();
        });

        /* Hide existing menu */
        $('nav#menu-collections ul').hide();

Answer 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create the dropdown base
            $('<select />').appendTo('nav#menu-collections');

            // Create default option "Go to..."
            $('<option />', {
                'selected': 'selected',
                'value': '',
                'text': 'Choose a Collection...',
                'class': 'select'
            }).appendTo('nav#menu-collections select');


            // Populate dropdown with menu items
            $('ul.menu > li').each(function () {
                var obj = $(this);
                if (obj.children('ul.sub-menu').length !== 0) {
                    var subMenuListItems = $('<optgroup />', { 'label': obj.children('a').text() });

                    if (obj.children('a').attr('href') !== undefined) {
                        subMenuListItems.append($('<option />', {
                            'value': obj.children('a').attr('href'),
                            //'text': obj.children('a').text()   //Or 
                            'text': 'Home'
                        }));
                    }

                    obj.children('ul.sub-menu').find('a').each(function () {
                        subMenuListItems.append($('<option />', {
                            'value': $(this).attr('href'),
                            'text': $(this).text()
                        }));
                    });

                    $('nav#menu-collections select').append(subMenuListItems);
                }
                else {
                    $('<option />', {
                        'value': obj.children('a').attr('href'),
                        'text': obj.children('a').text()
                    }).appendTo('nav#menu-collections select');
                }
            });

            $('nav#menu-collections select').change(function () {
                if ($(this).find('option:selected').hasClass('select') == false) {
                    window.location = $(this).find('option:selected').val();
                }
            });

            $('nav#menu-collections ul').remove();
        });
    </script>
</head>
<body>
    <nav id="menu-collections" role="navigation">
    <div class="menu-collections-container">
        <ul id="menu-collections-ul" class="menu">
            <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-49 current_page_item menu-item-52">
                <a href="#HeaderTest">Header Test</a>
            </li>
            <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-49 current_page_item menu-item-52">
                <a href="#1920">1920</a>
                <ul class="sub-menu">
                    <li id="menu-item-91" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-91">
                        <a href="#1920Test1">Test1</a> <a href="#1920Test5">Test5</a> <a href="#1920test4">
                            Test4</a> </li>
                </ul>
            </li>
            <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-49 current_page_item menu-item-52">
                <a href="#HeaderTest2">Header Test 2</a>
            </li>
            <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-49 current_page_item menu-item-52">
                <a href="#1921">1921</a>
                <ul class="sub-menu">
                    <li id="Li2" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-91">
                        <a href="#1921test">Test1</a> <a href="#1921test3">Test3</a> </li>
                </ul>
            </li>
        </ul>
    </div>
    </nav>
    <h1>
        1920
    </h1>
</body>
</html>

Answer 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create the dropdown base
            $('<select />').appendTo('nav#menu-collections');

            // Create default option "Go to..."
            $('<option />', {
                'selected': 'selected',
                'value': '',
                'text': 'Choose a Collection...',
                'class': 'select'
            }).appendTo('nav#menu-collections select');


            // Populate dropdown with menu items
            $('ul.menu > li').each(function () {
                var obj = $(this);

                $('<option />', {
                    'value': obj.children('a').attr('href'),
                    'text': obj.children('a').text()
                }).appendTo('nav#menu-collections select');

                if (obj.children('ul.sub-menu').length !== 0) {
                    obj.children('ul.sub-menu').find('a').each(function () {
                        $('<option />', {
                            'value': $(this).attr('href'),
                            'text': '--' + $.trim($(this).text())
                        }).appendTo('nav#menu-collections select');
                    });
                }
            });

            $('nav#menu-collections select').change(function () {
                if ($(this).find('option:selected').hasClass('select') == false) {
                    window.location = $(this).find('option:selected').val();
                }
            });

            $('nav#menu-collections ul').remove();
        });
    </script>
</head>
<body>
    <nav id="menu-collections" role="navigation">
    <div class="menu-collections-container">
        <ul id="menu-collections-ul" class="menu">
            <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-49 current_page_item menu-item-52">
                <a href="#HeaderTest">Header Test</a>
            </li>
            <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-49 current_page_item menu-item-52">
                <a href="#1920">1920</a>
                <ul class="sub-menu">
                    <li id="menu-item-91" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-91">
                        <a href="#1920Test1">Test1</a> <a href="#1920Test5">Test5</a> <a href="#1920test4">
                            Test4</a> </li>
                </ul>
            </li>
            <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-49 current_page_item menu-item-52">
                <a href="#HeaderTest2">Header Test 2</a>
            </li>
            <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-49 current_page_item menu-item-52">
                <a href="#1921">1921</a>
                <ul class="sub-menu">
                    <li id="Li2" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-91">
                        <a href="#1921test">Test1</a> <a href="#1921test3">Test3</a> </li>
                </ul>
            </li>
        </ul>
    </div>
    </nav>
    <h1>
        1920
    </h1>
</body>
</html>

向导航添加选项“子菜单”

2 个答案: