Question

我有这个菜单我不能在主题上复制菜单的代码，所以我把所有东西放在jsfiddle上，实际上我想要的菜单保持打开而不点击ParalleloR所以我希望在第一个菜单项上修复open class

(function ($) {
    $(document).ready(function () {
        $('#cssmenu li.has-sub>a').on('click', function () {
            $(this).removeAttr('href');
            var element = $(this).parent('li');
            if (element.hasClass('open')) {
                element.removeClass('open'); element.find('li').removeClass('open');
                element.find('ul').slideUp();
            }
            else {
                element.addClass('open');
                element.children('ul').slideDown(); element.siblings('li').children('ul').slideUp(); element.siblings('li').removeClass('open'); element.siblings('li').find('li').removeClass('open'); element.siblings('li').find('ul').slideUp();
            }
        });
        $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');
        (function getColor() {
            var r, g, b;
            var textColor = $('#cssmenu').css('color');
            textColor = textColor.slice(4);
            r = textColor.slice(0, textColor.indexOf(','));
            textColor = textColor.slice(textColor.indexOf(' ') + 1);
            g = textColor.slice(0, textColor.indexOf(','));
            textColor = textColor.slice(textColor.indexOf(' ') + 1);
            b = textColor.slice(0, textColor.indexOf(')'));
            var l = rgbToHsl(r, g, b);
            if (l > 0.7) {
                $('#cssmenu>ul>li>a').css('text-shadow', '0 0px 0px rgba(0, 0, 0, .0)');

            }
            else {
                $('#cssmenu>ul>li>a').css('text-shadow', '0 0px 0 rgba(255, 255, 255, .0)');

            }
        })();
        function rgbToHsl(r, g, b) {
            r /= 255, g /= 255, b /= 255;
            var max = Math.max(r, g, b), min = Math.min(r, g, b);
            var h, s, l = (max + min) / 2;
            if (max == min) {
                h = s = 0;
            }
            else {
                var d = max - min;
                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                switch (max) {
                    case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                    case g: h = (b - r) / d + 2; break;
                    case b: h = (r - g) / d + 4; break;
                }
                h /= 6;
            }
            return l;
        }
    });
})(jQuery);

.widget-area .widget {
    padding: 40px 10px 40px 0px;
}

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#cssmenu {
    width: 100%;
    font-family: Roboto;
    color: #ffffff;
}

    #cssmenu ul ul {
        display: none;
    }

.align-right {
    float: right;
}

#cssmenu > ul > li > a {
    padding: 15px 25px 16px 10px;
    border-top: 1px solid #CACACA;
    cursor: pointer;
    z-index: 2;
    font-size: 12px;
    font-weight: 300;
    text-decoration: none;
    color: #000000;
    /*background: #F9F9F9;*/
}

    #cssmenu > ul > li > a:hover,
    #cssmenu > ul > li.active > a,
    #cssmenu > ul > li.open > a {
        color: #000000;
    }

#cssmenu > ul > li.open > a {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.15);
    border-bottom: 0px solid #1682ba;
}

#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
    border-bottom: 0px solid #1682ba;
}

.holder {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: -11px;
}

    .holder::after,
    .holder::before {
        display: block;
        position: absolute;
        content: "";
        width: 6px;
        height: 6px;
        right: 20px;
        z-index: 10;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }

    .holder::after {
        top: 17px;
        border-top: 2px solid #000;
        border-left: 2px solid #000;
    }

#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
    border-color: #eee;
}

.holder::before {
    top: 18px;
    border-top: 2px solid;
    border-left: 2px solid;
    border-top-color: inherit;
    border-left-color: inherit;
}

#cssmenu ul ul li a {
    cursor: pointer;
    border-bottom: 1px solid #F5F5F5;
    /* border-left: 1px solid #32373e; */
    /* border-right: 1px solid #32373e; */
    padding: 12px 42px 12px 16px;
    z-index: 1;
    text-decoration: none;
    font-size: 13px;
    color: #32373e;
    background: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
    background: rgb(255, 255, 255);
    color: #23282d;
}



#cssmenu ul ul li:first-child > a {
    box-shadow: none;
}

#cssmenu ul ul ul li:first-child > a {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#cssmenu ul ul ul li a {
    padding-left: 30px;
}

#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
    border-bottom: 0;
}

#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
    border-bottom: 0px solid #32373e;
}

#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
    border-bottom: 0;
}

#cssmenu ul ul li.has-sub > a::after {
    display: block;
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    right: 20px;
    z-index: 10;
    top: 11.5px;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
    border-color: #000;
}

.subsubm {
    padding-left: 44px !important;
    background-color: #FFFFFF !important;
    border: 1px !important;
    color: black !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='cssmenu'>
  <ul>
    <li class='active has-sub'><a href='#'><span style="font-weight: 400; font-size: 16px;">ParalleloR</span></a>

      <ul>
        <li class='active has-sub'><a href='#'><span>Consulenza legale in outsourcing per aziende</span></a>
          <ul>
            <li class="last"><a class="subsubm" href='#'><span>Modello contratto di outsourcing</span></a></li>
          </ul>
        </li>
        <li class='active'><a href='#'><span>Temporary management</span></a></li>
        <li class='active'><a href='#'><span>Consulenza società estere</span></a></li>
        <li class='active has-sub'><a href='#'><span>Consulenza crisi aziendale</span></a>
          <ul>
            <li><a class="subsubm" href='#'><span>Consulenza risanamento aziendale e rilancio</span></a></li>
            <li class="last"><a class="subsubm" href='#'><span>Cpnsulenza ristrutturazione del debito</span></a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

https://jsfiddle.net/exolon82/vpfLf78s/3/

我不能在主题上复制菜单的代码，所以我把所有东西放在jsfiddle上，实际上我想要的菜单保持打开而不点击ParalleloR所以我想在第一个菜单项上修复open class

Answer 1

只需添加此款式

即可

#cssmenu > ul > li > ul{display: block!important;}

以下是FIDDLE

Answer 2

如果你需要在页面加载时打开第一个菜单，你仍然希望它作为手风琴使用，触发点击事件，在顶部手风琴的第一个菜单项上，onload。

$('#cssmenu li.has-sub>a').on('click', function(){ 
...
});
$('#cssmenu>ul>li.has-sub>a').click();

检查fiddle

菜单手风琴，第一个声音打开

2 个答案: