Question

这可能已被问过很多，但我似乎无法让它发挥作用。

我正在尝试设置此CSS / JavaScript菜单;在我将它提交到我的网站之前，所以请关注我的文字/颜色格式。： - ）

当我第一次创建它时，它是两级。但我想垂直添加第三层。

当我添加第3级代码时，第二级只是一个不可点击的链接，并没有显示第3级。

HTML：

<div id='cssmenu'>
<ul>
   <li class='has-sub'><a href='#'><span>Geeky Sites</span></a>
      <ul>
          <li class='has-sub'><a href='#'><span>Forums</span></a>
              <ul>
                 <li><a href='http://tools.email-checker.com/' target='_blank'><span>SMTP Checker</span></a></li>
              </ul>
          </li>
       </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Music and Bands</span></a>
      <ul>
         <li><a href='http://www.acdc.com/us/home' target='_blank'><span>AC/DC</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>iOS Apps</span></a>
      <ul>
         <li><a href='https://itunes.apple.com/gb/app/reeder-2/id697846300' target='_blank'><span>Reeder 2</span></a></li>
      </ul>
   </li>
   <li class='has-sub last'><a href='#'><span>Other Stuff</span></a>
      <ul>
         <li><a href='http://www.flickr.com/' target='_blank'><span>Flickr - Great</span></a></li>
      </ul>
   </li>
</ul>
</div>

JavaScript的：

$( document ).ready(function() {
$(document).ready(function(){

$('#cssmenu > ul > li ul').each(function(index, e){
  var count = $(e).find('li').length;
  var content = '<span class="cnt">' + count + '</span>';
  $(e).closest('li').children('a').append(content);
});
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu li').removeClass('active');
  $(this).closest('li').addClass('active'); 
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;   
  }     
});

});

});

CSS：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
@charset 'UTF-8';
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  position: relative;
}
#cssmenu a {
  line-height: 1.3;
}
#cssmenu {
  width: 881px;
}
#cssmenu > ul > li > a {
  padding-right: 40px;
  font-size: 25px;
  font-weight: bold;
  display: block;
  background: #b0b0b0;
  color: #ffffff;
  border-bottom: 1px solid #7d7d7d;
}
#cssmenu > ul > li > a > span {
  background: #c9c9c9;
  padding: 10px;
  display: block;
  font-size: 15px;
  font-weight: 300;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {
  border-bottom: none;
}
#cssmenu > ul > li.active > a {
  color: #fff;
}
#cssmenu > ul > li.active > a span {
  background: #b0b0b0;
}
#cssmenu span.cnt {
  position: absolute;
  top: 8px;
  right: 15px;
  padding: 0;
  margin: 0;
  background: none;
}
/* Sub menu */
#cssmenu ul ul {
  display: none;
}
#cssmenu ul ul li {
  border: 1px solid #e0e0e0;
  border-top: 0;
}
#cssmenu ul ul a {
  padding: 10px;
  display: block;
  color: #787878;
  font-size: 13px;
}
#cssmenu ul ul a:hover {
  color: #de8666;
  text-indent: 0;
}
#cssmenu ul ul li.odd {
  background: #f4f4f4;
}
#cssmenu ul ul li.even {
  background: #f4f4f4;
}

#cssmenu > li > ul li > ul{   /* Third Level & beyond */
    display:none;
    background:#068;
}
#cssmenu > li > ul li:hover > ul{
    display:block;
    position:absolute;
    left:100%;
    border-left:solid 3px #fff;
    top:0;
    width:auto;
}
#cssmenu > li > ul > li ul > li{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
    white-space:nowrap;
}
#cssmenu > li > ul > li ul > li:hover > span{
    color:#fff;
}

My JSFiddle

由于

Answer 1

我创造了我认为你在寻找的东西：

这里是JS小提琴的链接：http://jsfiddle.net/myJaM/41/

的jQuery

function expand($elem) {
    $('#cssmenu li.active').removeClass('active');
    $elem.closest('li').addClass('active');
    var checkElement = $elem.next();
    if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $elem.closest('li').removeClass('active');
        checkElement.slideUp('normal');
    }

    if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        checkElement.slideDown('normal');
    }

    var $childList = $elem.find('li').find('ul');
    if ($childList.children().length == 0) {
        return true;
    } else {
        return false;
    }
}


$('#cssmenu > ul > li ul').each(function (index, e) {
    var count = $(e).find('li').length;
    var content = '<span class="cnt">' + count + '</span>';
    $(e).closest('li').children('a').append(content);
});

$('#cssmenu ul ul li:odd').addClass('odd');

$('#cssmenu ul ul li:even').addClass('even');

$('#cssmenu > ul li a').click(function () {
    expand($(this));
});

$("#cssmenu > ul > li > a").click(function(){
    var $thisList = $(this).parent().find("ul");
    $("#cssmenu ul").not('#'+$thisList.attr('id')).not("#menu-root").slideUp("normal");
});

HTML

<body>
    <div id='cssmenu'>
        <ul id="menu-root">
            <li class='has-sub'><a href='#'><span>Geeky Sites</span></a>

                <ul id="list-geeky-sites">
                    <li class='has-sub'><a href='#'><span>Forums</span></a>

                        <ul>
                            <li><a href='http://tools.email-checker.com/' target='_blank'><span>SMTP Checker</span></a>

                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class='has-sub'><a href='#'><span>Music and Bands</span></a>

                <ul id="list-music">
                    <li><a href='http://www.acdc.com/us/home' target='_blank'><span>AC/DC</span></a>

                    </li>
                </ul>
            </li>
            <li class='has-sub'><a href='#'><span>iOS Apps</span></a>

                <ul id="list-ios">
                    <li><a href='https://itunes.apple.com/gb/app/reeder-2/id697846300' target='_blank'><span>Reeder 2</span></a>

                    </li>
                </ul>
            </li>
            <li class='has-sub last'><a href='#'><span>Other Stuff</span></a>

                <ul id="list-other">
                    <li><a href='http://www.flickr.com/' target='_blank'><span>Flickr - Great</span></a>

                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>

CSS / Javascript菜单的第3级

1 个答案:

的jQuery

HTML