Question

我从这个website得到了一个jquery垂直手风琴菜单。当您单击菜单时，它会添加一个活动类，以便您在单击它时可以控制该项目的外观。我也想用子菜单做这个。但我没有javascript技能。有人可以帮我这个。

这是javascript：

    jQuery.fn.initMenu = function() {  
return this.each(function(){
    var theMenu = $(this).get(0);
    $('.acitem', this).hide();
    $('li.expand > .acitem', this).show();
    $('li.expand > .acitem', this).prev().addClass('active');
    $('li a', this).click(
        function(e) {
            e.stopImmediatePropagation();
            var theElement = $(this).next();
            var parent = this.parentNode.parentNode;
            if($(parent).hasClass('noaccordion')) {
                if(theElement[0] === undefined) {
                    window.location.href = this.href;
                }
                $(theElement).slideToggle('normal', function() {
                    if ($(this).is(':visible')) {
                        $(this).prev().addClass('active');
                    }
                    else {
                        $(this).prev().removeClass('active');
                    }    
                });
                return false;
            }
            else {
                if(theElement.hasClass('acitem') && theElement.is(':visible')) {
                    if($(parent).hasClass('collapsible')) {
                        $('.acitem:visible', parent).first().slideUp('normal', 
                        function() {
                            $(this).prev().removeClass('active');
                        }
                    );
                    return false;  
                }
                return false;
            }
            if(theElement.hasClass('acitem') && !theElement.is(':visible')) {         
                $('.acitem:visible', parent).first().slideUp('normal', function() {
                    $(this).prev().removeClass('active');
                });
                theElement.slideDown('normal', function() {
                    $(this).prev().addClass('active');
                });
                return false;
            }
        }
    }
);

}）; };

$（document）.ready（function（）{$（'。menu'）。initMenu（）;}）;

这是html：

<ul class="menu collapsible">
<li>
    <a href="#">PROJECTS</a>
    <ul class="acitem">
        <li><a href="#">~ RESIDENTIAL</a></li>
        <li><a href="#">~ COMMERCIAL</a></li>
        <li><a href="#">~ MIXED USE</a></li>
        <li><a href="#">~ URBAN DESIGN</a></li>
        <li><a href="#">~ COMPETITIONS</a></li>
        <li><a href="#">~ INTERIOR DESIGN</a></li>
        <li><a href="#">~ SURVEY</a></li>
        <li><a href="prj-opdekaart.html" target="_blank">~ ON THE MAP</a></li>
    </ul>
</li>
<li>
    <a href="#">OFFICE</a>
    <ul class="acitem">
        <li><a href="#">~ INFO</a></li>
        <li><a href="#">~ EMPLOYEES</a></li>
        <li><a href="#">~ VACANCY</a></li>
        <li><a href="#">~ DOWNLOAD</a></li>
    </ul>
</li>
<li>
    <a href="#">CONTACT</a>
    <ul class="acitem">
        <li><a href="#">~ ADDRESS</a></li>
        <li><a href="#">~ E-MAIL</a></li>
    </ul>
</li>

Answer 1

当您点击项目或办公室或联系时。那些得到一个活跃的类，所以它可以用css控制（颜色）。如果你点击住宅或商业等（我称之为子菜单），我也想要这个。

选择子菜单项

1 个答案: