无法让 jquery 手风琴关闭所有面板

Question

I'm working off of an accordion script, some pages have sub pages (about, approach, our work) and some do not. If the user is on a page that there is no sub menu, I don't want another sub menu to show either (This is the current case)

The site: http://thegoodgirlsnyc.com/test/new/index3_7.php

The jquery in the the header:

 ddaccordion.init({
    headerclass: "headerbar", //Shared CSS class name of headers group
   contentclass: "submenu", //Shared CSS class name of contents group
    revealtype: "click", //Reveal content when user clicks or onmouseover the     header? Valid value: "click", "clickgo", or "mouseover"
    mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds    before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    //do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    //do nothing
}

})

And the js file: http://thegoodgirlsnyc.com/test/new/js/ddaccordion.js

I thought I could add a new headerclass - "headerclass2" and define it as headerbar2 because the menu items that do not have drop down's class name is.headerbar2 and change the line in the actual js file # 37 - 41 to say:

collapseall:function(headerclass2){ //PUBLIC function to collapse all headers based on their shared CSS classname
    var $headers=this.headergroup[headerclass2]
    this.contentgroup[headerclass2].filter(':visible').each(function(){
        $headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
    })
},

How can I get all of the sub menus to close when the user clicks on a link with no sub menus?

Answer 1

I think the issue you're running into is that the state is being persisted because of the setting: persiststate: true, .

It looks like what happens is, rather than opening the clicked headerbar (ie. Salons) and closing the other headerbars, it just goes straight to the linked page since there's no submenu. And since you're persisting the state, the open headerbar is staying open on the new page.

So, my suggestion is to use the defaultexpanded option, to open the specific headerbar you want opened on the specific page. You could then turn off persiststate and let the pages themselves handle which headerbar should be expanded. It may be a little more work, but it will give you fine control over which menus are open by default when visiting the pages.