我正在使用此代码：http://codepen.io/anon/pen/zxMRYG
我希望用户能够点击其中一个＆＃34;子项＆＃34;，然后让该子菜单替换＆＃34;起始项＆＃34; （很像标准选择下拉框可以工作）。
这可以通过我拥有的代码实现吗？这合乎逻辑吗？之前，我正在使用＆＃34;选项＆＃34;标签来实现这一点，但我无法弄清楚如何有子选项，所以我切换到这种格式。
以下是codepen isn工作时的代码：
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());
});
}
答案 0 :(得分：1)
尝试这样的事情：
$('.navbar > .start-item li > a').click(function(e) {
e.preventDefault();
$('.navbar > .start-item > a').text($(this).text());
});
答案 1 :(得分：1)
试试这个：
更新
// sub menus identification
$(function () {
$(".navbar").on("click", "li", function (event) {
var liElm = $(event.target).closest("li");
$(".navbar .caption").text(liElm.find("a:first").text());
$(".navbar li").removeClass("active");
liElm.addClass("active");
});
});