如何在ul下拉菜单中显示选定的菜单项

Posted 2023-05-08

【中文标题】如何在ul下拉菜单中显示选定的菜单项

【英文标题】：How to display selected menu item in ul dropdown menu

【发布时间】：2015-10-26 01:14:40

【问题描述】：

我有一个显示字体颜色供用户选择的下拉菜单。目前，下拉菜单显示“样式”，但我希望菜单标题显示当前选择的值。代码如下：

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"));
   );

抱歉，代码混乱，我对此比较陌生。 谢谢！

【参考方案1】：

下面是一些使用 jQuery 来实现的代码：

$(".font-names > li").click(function() 
   $("#menutitle").text($(this).text()); 
);

您还需要在菜单标题元素中添加id。

现场演示：

$(".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 版本：https://jsfiddle.net/m129zd8m/

【讨论】：

这在 JSFiddle 中完美运行，但是当我完全复制它时，它似乎不起作用。有什么想法吗？

@ScottMyers 您是否正确包含 jQuery？如果没有，请将此标签插入文档的 <head> 标签中，在所有其他脚本标签之前：<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

奇怪的是，我确实正确地包含了 jQuery。仍然没有改变，太奇怪了。

@ScottMyers 您还记得将 id 添加到菜单标题元素中，对吗？

当我在 jsfiddle jQuery 选项中选择 'No wrap tag' 而不是 'onLoad' 时，会发生同样的错误。这是什么意思？

【参考方案2】：

如果您将类 current-menu-item 添加到您要选择的 ul 中？

【参考方案3】：

将单击事件处理程序绑定到您的 li 项目并替换 li 的文本。

$('.font-names li').on('click', function () 
    var $currentMenuItem = $('.current-menu-item a'),
        currentText = $('a', this).text();

    $currentMenuItem.text(currentText);
);

但是看起来你的HTML 格式有点错误

 <ul>
      <li class="current-menu-item"><a>   <----
      <li><a href="#">Style</a>           <----
        <ul class="font-names">

必须根据它来改变正确的选择器。

Fiddle