javascript - Jquery控制菜单在所有菜单上显示箭头，即使是没有子菜单的菜单

Question

我正在从数据库中获取数据并使用三个中继器将其显示在菜单上，因为大多数菜单都有级别 1 到级别 3。

但是每次我运行代码时，它都会在所有菜单上显示一个箭头。（有子菜单的菜单和没有子菜单的菜单）

这是我的代码。我需要更多帮助才能使用 jquery

css

    .nestedsidemenu {
    font: bold 10pt 'Bitter', sans-serif;
    position: relative;
    width: 270px;
    }


   /* Top Level Menu */
    .nestedsidemenu ul {
    z-index: 1;
    position: relative;
    list-style: none;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.075em;
    }

    /* Top level list items */
    .nestedsidemenu ul li {
        position: relative;
        /*margin: 0.5em 0 0 0;
        padding: 0.8em 0 0 0;*/
        /*border-bottom: solid 1px rgba(210, 215, 217, 0.75);*/
        list-style: none;
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: 0.075em;
       }

        /* Top level menu items link style */
        .nestedsidemenu ul li a, .nestedsidemenu ul li span {
            display: block;
            position: relative;
            /* background of menu items (default state) */
            background: #f5f6f7;
            color: #3d4449;
            text-decoration: none;
        }


            .nestedsidemenu ul li a:link, .nestedsidemenu ul li a:visited {
                color: #3d4449;
                padding: 10px 30px;
                padding: 0.5em 1em;
                border-bottom: solid 0.5px rgba(210, 215, 217, 0.75);
            }

        /* Top level menu items link style on hover and when active */
        .nestedsidemenu ul li:hover > a {
            color: #218257;
            background: #f5f6f7;
        }

        /* Sub ULs style */
        .nestedsidemenu ul li ul {
            position: absolute;
            left: -5000px;
            top: 0;
            opacity: 0;
            width: 230px;
            visibility: hidden;
            box-shadow: 2px 2px 5px gray;
            -webkit-transition: opacity .3s, visibility 0s .3s, left 0s .3s;
            transition: opacity .3s, visibility 0s .3s, left 0s .3s;
        }

        /* NOTE First Sub Levels UL style on hover */
        .nestedsidemenu ul li:hover > ul {
            visibility: visible;
            left: 100%;
            opacity: 1;
            -webkit-transition: opacity .5s;
            transition: opacity .5s;
        }

        /* Sub level Menu list items (alters style from Top level List Items) */
        .nestedsidemenu ul li ul li {
            display: list-item;
            float: none;
        }

            /* 2nd and beyond Sub Levels vertical offset after 1st level sub menu */
            .nestedsidemenu ul li ul li ul {
                top: 0;
                left: 100%;
            }

     /* Sub Levels link style on hover and when active */
     .nestedsidemenu ul ul li:hover > a {
        background: #f5f6f7;

     }

     /*NOTE Sub Levels UL style on hover */
     .nestedsidemenu ul ul li:hover > ul {
        left: 100%;

     }

     /* Sub level menu links style */
     .nestedsidemenu ul li ul li a {
        font: normal 10pt 'Bitter', sans-serif;
        padding: 10px;
        margin: 0;
        background: #f5f6f7;
        border-right: none;
        border-top-width: 0;
      }

      /* LIs with a sub UL style */
      .nestedsidemenu ul li > a {
        /* add padding to accomodate arrow inside LIs */
        padding-right: 5px;
      }



        /* LIs with NO sub UL style */
        .nestedsidemenu ul li > a:only-child {
            /* undo padding for non submenu LIs */
            padding-right: 5px;
        }


    .nestedsidemenu ul li:only-child:after > ul {

        display:none !important;
      }
        /* LIs with a sub UL pseudo class */
     .nestedsidemenu ul li > a:after {
        /*  add arrow inside LIs   */
        content: "";
        position: absolute;
        height: 0;
        width: 0;
        border: 5px solid transparent;
        border-left-color: #218257;
        top: 40%;
        right: 8px;
      }









       .nestedsidemenu ul li  > a:only-child:after {

        display: none !important;

       }








    aspx page

    <div class="nestedsidemenu">

    <ul class="cat_menu">

    <asp:Repeater id="RepeaterMenu" runat="server">

    <itemtemplate>

    <li><a href="javascript:vold(0)"><%# Container.DataItem("Desc_menu")%></a>

    <ul class="submenu-wrapper" >

    <asp:repeater id="RepeaterSottoMenu" runat="server" DataSource='<%#Eval("sottomenu")%>'>

    <ItemTemplate>

    <li >
    <a href="<%# Container.DataItem("sotto_menu_url")%>"><%# 

    Container.DataItem("Desc_sotto_menu")%><span class="sub-arrow" ></span></a>

    <ul>

    <asp:repeater id="RepeaterFoglieSottoMenu" runat="server" datasource='<%# 

    Container.DataItem.Row.GetChildRows("fogliasottomenu") %>'>

    <ItemTemplate> 

    <li>

    <a href="<%# ResolvePath(Container.DataItem("FOGLIA_URL"), ResolveType.ResolveClientUrl) %>"><%# 

    Container.DataItem("DESC_FOGLIA_MENU")%></a></li>

    </ItemTemplate> 

    </asp:repeater>

    </ul>

    </li>

    </ItemTemplate> 

    </asp:repeater>

    </ul>

    </li>

    </ItemTemplate> 

    </asp:Repeater>

    <li>

    <br />

    </li>

    </ul>

    <br style="clear: left" />

    </div>

标签： javascriptjqueryhtmlcss

Answer 1

我终于解决了这个问题

带有子菜单的工作图像

没有子菜单的工作图像

将此脚本添加到我的页面

     <script >

    $(document).ready(function () {           

    $('.nestedsidemenu a').each(function() {
        if ( $(this).parent('li').children('ul').size() > 0 ) {

             $('.nestedsidemenu ul').each(function() {
              if ($(this).children().length == 0) {
              $(this).remove();
            }
          });
        }           
      });
    });

    </script>