我可以帮您翻译成中文。这是一个下拉菜单,用于显示用户选择的字体颜色。目前,下拉菜单显示“样式”,但我希望菜单标题显示当前选定的值。以下是代码:
HTML:
CSS:
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:
#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:
$(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"));
});
抱歉代码有些混乱,我还比较新手。谢谢!
<head>
标签中插入此标记,在所有其他脚本标记之前:<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
- Maximillian Laumeister