javascript - 有没有办法使 下拉菜单的功能类似于 选择菜单？

Question

我正在使用这段代码:http://codepen.io/anon/pen/zxMRYG

我希望用户能够单击其中一个“子项”，然后让该子菜单替换“起始项”(很像标准的选择下拉框)。

这可以用我的代码实现吗？合乎逻辑吗？之前，我使用“选项”标签来实现这一点，但我不知道如何有子选项，所以我改用这种格式。

如果 codepen 不工作，这里是代码:

HTML

    <div style="vertical-align:top;">
    <ul class="navbar cf">
            <!-- <li><a href="#">item 2</a></li> -->
            <li style="width:200px;background:222;"><a href="#">starting item</a>
                <ul>
                    <li><a href="#">sub item 1</a></li>
                    <li><a href="#">sub item 2</a></li>
                    <li><a href="#">sub item 3</a>
                        <ul>
                            <li><a href="#">google</a></li>
                            <li><a href="">yahoo!</a></li>
                            <li><a href="">jQuery</a>
             <!-- 
                                <ul>
                                    <li><a href="#">sub sub item 1</a></li>
                                    <li><a href="#">sub sub item 2</a>
                                        <ul>
                                            <li><a href="#">sub sub sub item 1</a></li>
                                            <li><a href="#">sub sub sub item 2</a></li>
                                            <li><a href="#">sub sub sub item 3</a>
                      <ul> 
                        <li><a href="#">sub item 1</a></li>
                        <li><a href="#">sub item 2</a></li>
                        <li><a href="#">sub item 3</a></li>
                      </ul>
                      </li>
                                        </ul>
                                    </li>
                                    <li><a href="#">sub sub item 3</a></li>
                                    <li><a href="#">sub sub item 4</a></li>
                                    <li><a href="#">sub sub item 5</a>

                  </li>
                                </ul>
                            </li> -->
                        </ul>
                    </li>
                    <li><a href="#">item a little longer</a></li>
                </ul>
            </li>
        <!-- 
            <li><a href="#">item 4</a></li>
            <li><a href="#">item 5</a></li> -->
        </ul>
       </div>        



CSS

    /* clearfix */
    /**
     * For modern browsers
     * 1. The space content is one way to avoid an Opera bug when the
     *    contenteditable attribute is included anywhere else in the document.
     *    Otherwise it causes space to appear at the top and bottom of elements
     *    that are clearfixed.
     * 2. The use of `table` rather than `block` is only necessary if using
     *    `:before` to contain the top-margins of child elements.
     */
    .cf:before,
    .cf:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }

    .cf:after {
        clear: both;
    }

    /**
     * For IE 6/7 only
     * Include this rule to trigger hasLayout and contain floats.
     */
    .cf {
        *zoom: 1;
    }


    ul.navbar {background: #222222; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url();
    background: -moz-linear-gradient(top, #222222 0%, #161616 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(100%,#161616)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #222222 0%,#161616 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #222222 0%,#161616 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #222222 0%,#161616 100%); /* IE10+ */
    background: linear-gradient(to bottom, #222222 0%,#161616 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#161616',GradientType=0 ); /* IE6-8 */
      width: 200px;
      margin: auto; 
      border-radius: 3px;
      box-shadow: inset 0 1px 0 #555;



    }

    ul.navbar li {
        float: left;
        margin: 0;
        position: relative;
    }

    ul.navbar li a {
        display: block;
        /*padding: 13px 44px;*/
        padding:8px 5px;
        color: white !important;
        text-decoration: none;
        text-transform: none;
        transition: all .2s ease-in-out;
    }

    ul.navbar li a:hover,
    ul.navbar li:hover > a {
        background: #39bae6;
        color: #333 !important;
    }

    ul.navbar li ul {
        margin: 0;
        padding:0;
        position: absolute;
        background: #222;
        left: em;
        font-size: 14px;
        min-width: 200px;
        opacity: 0;
        visibility: hidden;
        z-index: 99;
        box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
                                0 5px 10px rgba(0,0,0,.6);
        /* transition: all .2s ease-in-out; */
    }

    ul.navbar li ul li { border-top: 1px solid #2a2a2a; }
    ul.navbar li ul li:first-child { border: 0;}
    ul.navbar ul li { float: none; }
    ul.navbar li:hover > ul { opacity: 1; visibility: visible; left: 0; }
    ul.navbar li > ul  ul { top: 0; left: 90%; box-shadow: 0 5px 10px rgba(0,0,0,.6);}
    ul.navbar li > ul li:hover ul { left: 100%; }

    ol, ul { list-style: outside none none; }


JS

    // sub menus identification
    $(function() {
      // $('ul.navbar li ul').parent('li').css('background', 'red');
    });


Thank you.

编辑:我在尝试实现解决方案时遇到了一些问题。这是我的整页 HTML:

<!DOCTYPE html>
<!--

-->
<html lang="en">
    <head>


        <link type="text/css" rel="stylesheet" href="css/styletime.css" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="js/init.js"></script>



    </head>



   <body>

<p>Hello?</p>


<div class="wrap">


    <div style="vertical-align:top;">
    <ul class="navbar cf">
            <!-- <li><a href="#">item 2</a></li> -->
            <li style="width:200px;background:222;"><a href="#">item 3 oh no?</a>
                <ul>
                    <li><a href="#">sub item 1</a></li>
                    <li><a href="#">sub item 2</a></li>
                    <li><a href="#">sub item 3</a>
                        <ul>
                            <li><a href="#">google</a></li>
                            <li><a href="">yahoo!</a></li>
                            <li><a href="">jQuery</a>
             <!-- 
                                <ul>
                                    <li><a href="#">sub sub item 1</a></li>
                                    <li><a href="#">sub sub item 2</a>
                                        <ul>
                                            <li><a href="#">sub sub sub item 1</a></li>
                                            <li><a href="#">sub sub sub item 2</a></li>
                                            <li><a href="#">sub sub sub item 3</a>
                      <ul> 
                        <li><a href="#">sub item 1</a></li>
                        <li><a href="#">sub item 2</a></li>
                        <li><a href="#">sub item 3</a></li>
                      </ul>
                      </li>
                                        </ul>
                                    </li>
                                    <li><a href="#">sub sub item 3</a></li>
                                    <li><a href="#">sub sub item 4</a></li>
                                    <li><a href="#">sub sub item 5</a>

                  </li>
                                </ul>
                            </li> -->
                        </ul>
                    </li>
                    <li><a href="#">item a little longer</a></li>
                </ul>
            </li>
        <!-- 
            <li><a href="#">item 4</a></li>
            <li><a href="#">item 5</a></li> -->
        </ul>
       </div>        


       <div class="adder">
        <div id="container">
            <section id="taskIOSection">
                    <div id="formContainer">
                    <form id="taskEntryForm">
                        <input id="taskInput"  style="font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;" placeholder="Add your interests here..." autocomplete="off"/>
                    </form>
                </div>
                <ul id="taskList"></ul>
            </section>
        </div>
      </div>





 </div> 



    </body>
</html>

这是我完整的 init.js 页面:

/*Adder*/
      $(document).ready(function () {
                            var i = 0;
                            for (i = 0; i < localStorage.length; i++) {
                                var taskID = "task-" + i;
         $('#taskList').append("<li id='" + taskID + "'>" + localStorage.getItem(taskID) + "</li>");
                            }
                            $('#clear').click(function () {
                                localStorage.clear();
                            });
                            $('#taskEntryForm').submit(function () {
                                if ($('#taskInput').val() !== "") {
                                    var taskID = "task-" + i;
                                    var taskMessage = $('#taskInput').val();
                                    localStorage.setItem(taskID, taskMessage);
        $('#taskList').append("<li class='task' id='" + taskID + "'>" + taskMessage + "</li>");
                                    var task = $('#' + taskID);
                                    task.css('display', 'none');
                                    task.slideDown();
                                    $('#taskInput').val("");
                                    i++;
                                }
                                return false;
                            });

                            $('#taskList').on("click", "li", function (event) {
                                self = $(this);
                                taskID = self.attr('id');
                                localStorage.removeItem(taskID);
                                self.slideUp('slow', function () {
                                    self.remove();
                                });

                            });

});




/*MenuClick*/  
$(function() {

$('.navbar > .start-item li > a').click(function(e) {
    e.preventDefault();
    $('.navbar > .start-item > a').text($(this).text());
});
}

Answer 1

尝试这样的事情:

$('.navbar > .start-item li > a').click(function(e) {
    e.preventDefault();
    $('.navbar > .start-item > a').text($(this).text());
});

演示: http://jsfiddle.net/aaqzzd3b/1/