[英]How to display selected menu item in ul dropdown menu
I have a dropdown menu that displays font colors for user choice. 我有一个下拉菜单,显示用户选择的字体颜色。 At the moment, the dropdown displays 'style', however I would like the menu title to display the currently selected value.
此时,下拉列表显示“样式”,但我希望菜单标题显示当前选定的值。 Here's the code:
这是代码:
HTML: HTML:
<div id="font_dropdown" class="dropdown">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item"><a>
<li><a href="#">Style</a>
<ul class="font-names">
<li style="font-family: Raleway"><a>Raleway</a></li>
<li style="font-family: palatino"><a>Palatino</a></li>
<li style="font-family: impact"><a>Impact</a></li>
<li style="font-family: courier"><a>Courier</a></li>
<li style="font-family: Copperplate"><a>Copperplate</a></li>
<li style="font-family: Monospace"><a>Monospace</a></li>
<li style="font-family: Fantasy"><a>Fantasy</a></li>
<li style="font-family: Calibri"><a>Calibri</a></li>
<li style="font-family: Cursive"><a>Cursive</a></li>
<li style="font-family: Futura"><a>Futura</a></li>
<li style="font-family: Rockwell"><a>Rockwell</a></li>
<li style="font-family: Andale Mono"><a>Andale</a></li>
</ul>
</li>
</ul>
</nav>
</div>
CSS: CSS:
#primary_nav_wrap
{
margin-top:15px;
font-family:raleway;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
font-family:raleway;
}
#primary_nav_wrap ul a
{
display:block;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
z-index:100;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0px;
padding:0;
z-index:100;
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd;
color: orange;
z-index:100;
}
#primary_nav_wrap ul li:hover
{
background:#F3F4F5;
cursor: pointer;
color: orange;
z-index:100;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0;
z-index:100;
}
#primary_nav_wrap ul ul li
{
float:none;
z-index:100;
width:235px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 10px;
text-align: left;
left: 100px;
z-index:100;
}
#primary_nav_wrap ul ul ul
{
top:0;
z-index:100;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:list-item;
color: orange;
z-index:100;
Javascript: 使用Javascript:
$(document).on("click", '.font-names li a', function() {
$("#imagewrap h3").css("font-family", $(this).parent().css("font-family"));
$("#new_tile_font_style").val($(this).parent().css("font-family"));
});
Sorry for messy code, I'm relatively new to this. 对不起凌乱的代码,我对此比较陌生。 Thanks!
谢谢!
Here's a bit of code that uses jQuery to do it: 这里有一些使用jQuery执行此操作的代码:
$(".font-names > li").click(function() {
$("#menutitle").text($(this).text());
});
You'll also need to add an id
to your menu title element. 您还需要在菜单标题元素中添加
id
。
Live Demo: 现场演示:
$(".font-names > li").click(function() { $("#menutitle").text($(this).text()); });
#primary_nav_wrap { margin-top:15px; font-family:raleway; } #primary_nav_wrap ul { list-style:none; position:relative; float:left; margin:0; padding:0; font-family:raleway; } #primary_nav_wrap ul a { display:block; text-decoration:none; font-weight:700; font-size:12px; line-height:32px; padding:0 15px; z-index:100; } #primary_nav_wrap ul li { position:relative; float:left; margin:0px; padding:0; z-index:100; } #primary_nav_wrap ul li.current-menu-item { background:#ddd; color: orange; z-index:100; } #primary_nav_wrap ul li:hover { background:#F3F4F5; cursor: pointer; color: orange; z-index:100; } #primary_nav_wrap ul ul { display:none; position:absolute; top:100%; left:0; background:#fff; padding:0; z-index:100; } #primary_nav_wrap ul ul li { float:none; z-index:100; width:235px } #primary_nav_wrap ul ul a { line-height:120%; padding:10px 10px; text-align: left; left: 100px; z-index:100; } #primary_nav_wrap ul ul ul { top:0; z-index:100; left:100% } #primary_nav_wrap ul li:hover > ul { display:list-item; color: orange; z-index:100; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="font_dropdown" class="dropdown"> <nav id="primary_nav_wrap"> <ul> <li class="current-menu-item"><a> <li><a id="menutitle" href="#">Style</a> <ul class="font-names"> <li style="font-family: Raleway"><a>Raleway</a></li> <li style="font-family: palatino"><a>Palatino</a></li> <li style="font-family: impact"><a>Impact</a></li> <li style="font-family: courier"><a>Courier</a></li> <li style="font-family: Copperplate"><a>Copperplate</a></li> <li style="font-family: Monospace"><a>Monospace</a></li> <li style="font-family: Fantasy"><a>Fantasy</a></li> <li style="font-family: Calibri"><a>Calibri</a></li> <li style="font-family: Cursive"><a>Cursive</a></li> <li style="font-family: Futura"><a>Futura</a></li> <li style="font-family: Rockwell"><a>Rockwell</a></li> <li style="font-family: Andale Mono"><a>Andale</a></li> </ul> </li> </ul> </nav> </div>
JSFiddle version: https://jsfiddle.net/m129zd8m/ JSFiddle版本: https ://jsfiddle.net/m129zd8m/
也许如果你将类current-menu-item
到你想要选择的ul?
Bind a click event handler to your li
items and replace the text for the li
. 绑定一个click事件处理程序到你的
li
项目和更换的文字li
。
$('.font-names li').on('click', function () {
var $currentMenuItem = $('.current-menu-item a'),
currentText = $('a', this).text();
$currentMenuItem.text(currentText);
});
But looks like your HTML
is a bit malformed 但看起来你的
HTML
有点格格不入
<ul>
<li class="current-menu-item"><a> <----
<li><a href="#">Style</a> <----
<ul class="font-names">
The right selector has to be changed based on it. 必须根据它更改右选择器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.