Question

我正在使用我在网络上找到的css菜单，并希望添加一些javascript，以便在页面加载时自动打开菜单。我用javascript垃圾，所以可以帮忙。下面是JS代码。我在HTML中有四个菜单，有一个子菜单;目前，其中包含'a'链接。我想在页面加载时打开第一个菜单，这将显示它的子菜单。

JS代码：

$(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: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;
            }
        });
    });
});

Answer 1

您只需将active课程添加到第一个<li class="has-sub">，然后将display: block;添加到<ul>里面。不需要JQuery。

<li class='has-sub active'><a href='#'><span>Geeky Sites</span></a>
   <ul style="display: block;">
      <li class='last'><a href='http://tools.email-checker.com/' target='_blank'><span>SMTP Checker</span></a></li>
   </ul>
</li>

Answer 2

如果您想在jQuery中执行此操作而不是CSS（可能用于转换），您有两种选择：

将onclick事件作为单独的函数提取，并使用top http://jsfiddle.net/myJaM/1/ open($("#cssmenu li *")[0]);（$($("#cssmenu li *")[0]).click();）
或在附加点击事件http://jsfiddle.net/myJaM/2/（{{1}}）

Answer 3

如果您希望它在开始时打开，为什么不将active课程添加到li，将display: block添加到孩子ul？

或者您是否正在寻找动画在开始时运行？如果是这样，请在document.load函数结束时执行此操作：

$('#cssmenu > ul > li:first > a').trigger('click');

另一方面，你的造型课程（最后，奇数和偶数）是不必要的。尝试使用:nth-last-child，:nth-child(odd)和:nth-child(even)。

Answer 4

 $("#cssmenu ul li:eq(0)").addClass('active');
 $("#cssmenu ul li:eq(0) ul").css('display','block');

添加这段代码并尝试演示 http://jsfiddle.net/myJaM/3/

加载页面时打开javascript菜单

4 个答案: