主菜单导航栏

时间:2019-11-13 12:34:59

标签: javascript css blogger

我正在尝试在导航菜单中添加子子菜单项,但是它只是停留在子子菜单上。请检查图像,我添加“ _”作为子项,“ __”使子子项,但是当我输入“ ___”时,会在子文本中添加一个“ _”。所以我带了与此部分有关的JS代码。

$('#main-menu').each(function() {
    var iTms = $(this).find('.LinkList ul > li').children('a'),
        iLen = iTms.length;
    for (var i = 0; i < iLen; i++) {
        var i1 = iTms.eq(i),
            t1 = i1.text();
        if (t1.charAt(0) !== '_') {
            var i2 = iTms.eq(i + 1),
                t2 = i2.text();
            if (t2.charAt(0) === '_') {
                var l1 = i1.parent();
                l1.append('<ul class="sub-menu m-sub"/>');
            }
        }
        if (t1.charAt(0) === '_') {
            i1.text(t1.replace('_', ''));
            i1.parent().appendTo(l1.children('.sub-menu'));
        }
    }
    for (var i = 0; i < iLen; i++) {
        var i3 = iTms.eq(i),
            t3 = i3.text();
        if (t3.charAt(0) !== '_') {
            var i4 = iTms.eq(i + 1),
                t4 = i4.text();
            if (t4.charAt(0) === '_') {
                var l2 = i3.parent();
                l2.append('<ul class="sub-menu2 m-sub"/>');
            }
        }
        if (t3.charAt(0) === '_') {
            i3.text(t3.replace('_', ''));
            i3.parent().appendTo(l2.children('.sub-menu2'));
        }
    }
    $('#main-menu ul li ul').parent('li').addClass('has-sub');
    $('#main-menu-nav > li > a').each(function() {
        var $this = $(this),
            txt = $this.attr('href').trim().toLowerCase();
        if (txt == 'homepage') {
            $this.attr('href', '/').parent('li').addClass('li-home');
        }
    });
    $('#main-menu .widget').addClass('show-menu');
}

那是我的HTML代码

  <div class='header-menu'>
  <div class='container row'> 
    <b:section class='main-menu' id='main-menu' maxwidgets='1' name='Main Menu' showaddelement='yes'>
       <b:widget id='LinkList74' locked='true' title='Link List' type='LinkList' version='2' visible='true'>
         <b:widget-settings>
           <b:widget-setting name='link-3'>#</b:widget-setting>
           <b:widget-setting name='sorting'>NONE</b:widget-setting>
           <b:widget-setting name='link-4'>#</b:widget-setting>
           <b:widget-setting name='text-1'>main item</b:widget-setting>
           <b:widget-setting name='link-1'>#</b:widget-setting>
           <b:widget-setting name='text-0'>home</b:widget-setting>
           <b:widget-setting name='link-2'>#</b:widget-setting>
           <b:widget-setting name='text-3'>__DropDown 1</b:widget-setting>
           <b:widget-setting name='link-0'>homepage</b:widget-setting>
           <b:widget-setting name='text-2'>_DropDown</b:widget-setting>
           <b:widget-setting name='text-4'>___DropDown 2</b:widget-setting>
         </b:widget-settings>
         <b:includable id='main'>
          <b:include name='content'/>
        </b:includable>
         <b:includable id='content'>
          <ul id='main-menu-nav' role='menubar'>
            <b:loop values='data:links' var='link'>
              <li><a expr:href='data:link.target' role='menuitem'><data:link.name/></a></li>
            </b:loop>
          </ul>
        </b:includable>
       </b:widget>
     </b:section>
    <div id='nav-search'>
      <form class='search-form' expr:action='data:blog.searchUrl' role='search'>
        <input autocomplete='off' class='search-input' expr:placeholder='data:messages.searchThisBlog' name='q' type='search' value=''/>
        <span class='hide-search'/>
      </form>
    </div>
    <span class='show-search'/>
  </div>
</div>

this is how i add drop down items

0 个答案:

没有答案