Jag har en webpage som visar en sidofältmeny med huvudsakliga kategorier och Sub-Categories.
When som användaren klickar på en huvudsaklig kategori, menyn delar upp utvidgar för att visa subna-categories. användaren för
The kan därefter klicka på suben-category för att visa products.
I använde en JQuery fungerar för att utvidga och kollapsa menyalternativen. Jag använde coldfusion, och queryen för mysql
to databasen, som innehåller MainCategoryen bordlägger, kategorien (sub) bordlägger och products bordlägger. MainCategoryIDen och CategoryIDen (sub) botheds passerade till och med problemet för URL.
The som jag har är, när användaren klickar en sub-category annan än första listad, den sidan för refreshes
the och går tillbaka endast att utvidga det första menyobjektet. Produkterna visas korrekt,
but som jag behöver den att utvidga det sist menyobjektet, som var utvalt. Med andra ord jag behöver att sätta fokuserar
on det sist utvalda menyobjektet using variablerna som passeras till och med url.
Here är en anknyta till sidan, som I-förmiddagen som ser, så du kan se till hur den uppför. för " för http://advantagescaffold.com/products.cfm " rel= " nofollow " " för _blank " target= > http://advantagescaffold.c om/products.cfm
den side menyn är på vänster sida. den standardinställer till det första menyobjektet. När du väljer ett alternativ för different
menu som den ska passerar variablerna till och med url.
I har inklusive expand.jsen att spara, fungera, som går i .cfmen, sparar, dela upp som visar
menu och cssen, som är tillhörande med JQueryen function.
> för
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
" codeBody "
" notpretty class= " för ------------------------------------------------------------
expand.js:
------------------------------------------------------------
(fungera ($) {
$.fn.expandAll = fungerar (alternativ) {
var standardinställer = {
expTxt: ”Visa alla”,
cllpsTxt: ”Dölja alla”,
cllpsEl: ”.collapse”, // den hopfällbara beståndsdelen
starta: ”.expand”, // som beståndsdelarna, som innehåller starta av vippen, verkställer på den hopfällbara individen delar upp
referens: ”.expand”, // koppla ”utvidgar alla/alla som kollaps” sätts in för ”referensen”,
showMethod: ”visa”,
hideMethod: ”skinn”,
statligt: ”dolt”, // de hopfällbara beståndsdelarna döljas av standard: använd ”dolt” eller ”visat”,
rusa: 0,
oneSwitch: riktigt
};
var-nolla = $.extend ({}, standarder, alternativ);
var-toggleTxt = o.expTxt;
om (”dold” o.state-==) {
$ (denna) .find (o.cllpsEl + ”: inte (.shown)”) .hide ()
.prev () .find (o.trigger + ”> a.open”) .removeClass (”öppna”);
} annars {
toggleTxt = o.cllpsTxt;
}
återgång this.each (fungera (indexet) {
var-referent, $cllps, $tr;
om (o.ref) {
var-behållare;
om (this.id.length) {
behållare = ”nr.” + this.id;
} annars, om (this.className.length) {
behållare = this.tagName.toLowerCase () + ”.”, + this.className.split (””) .join (”. ”);
} annars {behållaren = this.tagName.toLowerCase ();}
referent = $ (denna) .find (””” + o.ref + ”: först””);
$cllps = $ (denna) .closest (behållaren) .find (o.cllpsEl);
$tr = $ (denna) .closest (behållaren) .find (o.trigger + ”>”);
} annars {
referent = $ (denna);
$cllps = $ (denna) .find (o.cllpsEl);
$tr = $ (denna) .find (o.trigger + ”>”);
}
om (o.oneSwitch) {
referent.before (”” + toggleTxt + ””);
} annars {
referent.before (”” + o.expTxt + ” | ” + o.cllpsTxt + ””);
}
referent.prev (”p”) .find (”a”) .click (fungera () {
om, == o.expTxt (för $ (denna) .text ()) {
om (o.oneSwitch) {$ (denna) .text (o.cllpsTxt);}
$tr.addClass (”öppna”);
$cllps [o.showMethod] (o.speed);
} annars {
om (o.oneSwitch) {$ (denna) .text (o.expTxt);}
$tr.removeClass (”öppna”);
$cllps [o.hideMethod] (o.speed);
}
gå falskt tillbaka;
});
});};
------------------------------------------------------------
fungera som går i .cfmen sparar
------------------------------------------------------------
$ (fungera () {
// --- Using standardalternativen:
$ (”h3.expand”) .toggler ({initShow: ”div.collapse: först”});
// --- Andra alternativ:
// $ (”h3.expand”) .toggler ({metoden: ”vippen”, rusar: 0});
// $ (”h3.expand”) .toggler ({metoden: ”vipp”});
// $ (”h3.expand”) .toggler ({rusa: ”fasta”});
// $ (”h3.expand”) .toggler ({metoden: ”fadeToggle”});
// $ (”h3.expand”) .toggler ({metoden: ”slideFadeToggle”});
$ (”#content”) .expandAll ({starta: ”h3.expand”, referens: ”div.demo”, showMethod: ”slideDown”, hideMethod: ”slideUp”, rusar: 400 oneSwitch: falskt});
});
------------------------------------------------------------
css
------------------------------------------------------------
/*css för utvidgbara Containers*
/* --------
Cssen härskar erbjudet här är precis ett exempel, dig kan använda dem som en basera.
Forma ditt ”utvidgar/kollapsen” tillfredsställer, så att den möter utforma av din plats.
--------- *
* {förse med marginal: 0; vaddera: 0}
/* --- Sidan strukturerar --- *
#wrapper {
förse med marginal: 0 automatisk;
/*padding: 15px 15%; *
text-arrangera i rak linje: lämnat;
}
#wrapper h3 {
förse med marginal: 0;
}
#content {
/*max-width: 70em; *
bredd: 100%;
förse med marginal: 0 automatisk;
vaddera-bottna: 0px;
överflöd: dolt
}
.demo {
förse med marginal: 0 automatisk;
vaddera: 0;
placera: släkting;
bakgrund: #000;
}
.collapse h4 {som vadderar: 0;}
#DocumentID .DocumentID {förse med marginal-bottna: 5px; text-arrangera i rak linje: centrera; färga: #000;}
/* --- Överskrifter --- *
.expand {vaddera-bottna: 0;}
/* --- Anknyter --- *
#switch .switch {
färga: #BCB39A;
bredd: 220px;
förse med marginal: 0;
vaddera: 0 0 0 10px;
text-arrangera i rak linje: lämnat;
}
.expand a {
skärm: kvarter;
vaddera: 5px 40px 5px 10px;
färga: #8A5D3C;
}
.expand a: anknyta .expand a: besökt {
färga: #8A5D3C;
bakgrund: url (. ingen-repetition för /images/arrow-down.gif);
förse med marginal: 0;
vaddera: 0 0 0 10px;
}
.expand a: svävande .expand a: aktiv .expand a: fokusera {
text-garnering: inga;
}
.expand a.open: anknyta .expand a.open: besökt {
bakgrund: url (. ingen-repetition för /images/arrow-up.gif);
förse med marginal: 0;
vaddera: 0 0 0 10px;
}
/*subNav*/
.subNav a {
färga: #BCB39A;
text-garnering: inga;
}
.subNav a: svävande {
färga: #8A5D3C;
text-garnering: inga;
}
.focus a {text-garnering: inga; färga: #fff;}
.focus a: svävande {text-garnering: inga;}
h3.expand {
förse med marginal: 0;
vaddera: 15px 0 0 0;
stilsort-väga: det normala;
}
h4.subNav h4.focus {
förse med marginal: 0;
vaddera: 0 0 5px 10px;
stilsort-väga: det normala;
text-omforma: inga;
}
------------------------------------------------------------
dela upp som visar menyn från .cfmen sparar:
------------------------------------------------------------
group= " MainCategoryID " för
class= #MainCategory#
#theClass# " >#Category#
" klar "
|
