个人中心
gpt4 book ai didi

html - 太多 ul 标签...需要将 ul 标签转换为其他标签

转载 作者：行者123 更新时间：2023-11-28 13:47:42 25 4
gpt4 key购买 nike

已修订...在底部添加了其他信息...

我正在尝试获得一个动态创建的嵌套菜单以使用某些 css，但我遇到的问题是我最终得到了一个额外的 ul 标签。因此，我想将具有与之关联的类的 (ul class='sf-menu') 标记转换为类似 div 标记的东西，它不会创建列表结构的一部分。

这是我得到的结果

<nav class="main-menu">
<ul class='sf-menu'>
<ul>
  <li> <a href='index.php'>HOME</a> </li>
</ul>
</nav>

这是现有的CSS:

    nav.main-menu{ width:950px; margin:0 auto; background:url(../images/bg-nav.png) 0 0 repeat; padding-bottom:6px;}

    /* menu */
.sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;}
.sf-menu li {float:left; position:relative; background:url(../images/menu-line.jpg) 0 0 no-repeat; padding-left:1px; text-transform:uppercase; font:11px/15px Arial, Helvetica, sans-serif;}
.sf-menu li:first-child{ background:none; padding-left:0;}
.sf-menu li a {display:block;background:#1f2025; width:135px; padding:19px 0 18px; text-align:center; color:#eaeaea; position:relative; overflow:hidden;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}
.sf-menu li.last a{ width:134px;}
.sf-menu li a em{ font-style:normal;color:#eaeaea;}
.sf-menu li.sfHover a,.sf-menu li.current a,.sf-menu li a:hover{text-decoration:none; background:#e5e4e2;}
.sf-menu li.sfHover a em,.sf-menu li.current a em,.sf-menu li a:hover em{color:#1f2025;}
.sf-menu ul {position:absolute;top:-999em;z-index:99;width:172px;display:none;background:none; background:#1f2025; padding:3px;}
.sf-menu li li{padding:0; width:100%; font:10px/13px Arial, Helvetica, sans-serif;}
.sf-menu li li a,.sf-menu li.sfHover li a,.sf-menu li.current li a{color:#fff; background:#1f2025; width:auto; padding:10px;
        -webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}
.sf-menu li li a:hover,.sf-menu li li.sfHover a,.sf-menu li li.current a{ background:#efeeee; color:#000;}
.sf-menu ul ul {position:absolute;top:-999em;z-index:99;width:172px;display:none;background:none; background:#1f2025; padding:3px;}
.sf-menu li li li{padding:0; width:100%;}
.sf-menu li li li a,.sf-menu li li.sfHover li a,.sf-menu li li.current li a{color:#fff; background:#1f2025; width:auto; padding:10px;}
.sf-menu li li li a:hover,.sf-menu li li li.current a{background:#efeeee; color:#000;}
.sf-menu li:hover ul,.sf-menu li.sfHover ul {left:0px;top:53px; /* match top ul list item height */}
ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul {top:-999em;}
ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul {left:179px; /* match ul width */top:0px;}
ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {top:-999em;}
ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul {left:10em; /* match ul width */    top:00px;}

这是正文代码:

<body>
<nav class="main-menu">
    <ul class='sf-menu'>  /*this is the line that needs fixing*/
        <?php echo buildMenu(0, $menu); ?>
    <div class="clear"></div>
</nav>

</body>

附加代码:

如果我要将类添加到列表的根 ul 标记中，我如何将它与函数首先要生成的 ul 标记分开？我如何告诉它只向第一个 ul 标签添加一个类？

function buildMenu($parent, $menu)
{
   $menulist = "";
   if (isset($menu['parents'][$parent]))
   {
      $menulist .= "<ul>\n";
       foreach ($menu['parents'][$parent] as $itemId)
       {
          if(!isset($menu['parents'][$itemId]))
          {
             $menulist .= "   <li><a href='".$menu['items'][$itemId]['menuURL']."'>".$menu['items'][$itemId]['menuName']."</a></li> \n";
          }
          if(isset($menu['parents'][$itemId]))
          {
             $menulist .= "   <li><a href='".$menu['items'][$itemId]['menuURL']."'>".$menu['items'][$itemId]['menuName']."</a>";
             $menulist .= buildMenu($itemId, $menu);
             $menulist .= "</li> \n";
         }
         }
         $menulist .= "</ul> \n";
   }
   return $menulist;
}?>

最佳答案

您需要完全删除突出显示的行并修改 buildMenu 函数，以便它将 sf-menu 类添加到根 ul 它创建的标签。

或者使用 javascript 在页面加载时动态添加类。

更新

您可以向该函数添加一个可选参数以跟踪您所在的菜单级别。

function buildMenu($parent, $menu, $level = 1)
{
   $menulist = "";
   if (isset($menu['parents'][$parent]))
   {   
       $menulist .= "<ul";
       if ($level == 1)
       {
           $menulist .= " class='sf-menu'";
       }
       $menulist .= ">\n";
       foreach ($menu['parents'][$parent] as $itemId)
       {
          ....

             $menulist .= buildMenu($itemId, $menu, $level+1);

          ....
}?>

关于html - 太多 ul 标签...需要将 ul 标签转换为其他标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11714306/

25 4 0
文章推荐： css - z-index 和链接的问题
文章推荐： html - CSS、Top、Bottom Div 以及水平居中的 Div
文章推荐： css - 内置 CSS 的按钮在 FF 和 Webkit 中显示不同的字体颜色
文章推荐： html - IE 浏览器特有的两种不同服务器环境下的页面未应用 CSS 样式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com