webForumDet fria alternativet

Jquery- och CSS-anrop

5 svar · 591 visningar · startad av bikic

bikicMedlem sedan juni 2006261 inlägg
#1

Hej,

I headern på sidan så anropar jag alla jqueryfunktioner, där jag bland annat har en togglefunktion.

Togglefunktionen ser ut så här.


// Toggle FAQ

        $(".list-faq-container").hide(); 

	$("div.trigger").toggle(function(){
		$(this).next(".list-faq-container").show();
		$(this).addClass("active");
		}, function () {
		$(this).next(".list-faq-container").hide();
		$(this).removeClass("active");
	});

Jag har också ett sökformulär med en autosuggest och här är tanken att man ska kunna söka på innehåll som finns inuti i toggle. Än så länge fungerar det skitbra och jag kommer till sidan där innehållet finns. MEN...

Jag vill att toggle ska expandera. Jag har lyckats få till det med att lägga en active-class på triggern (div.trigger) men innehållet (list-faq-container) visas ej.

I jqueryscriptet så finns $(".list-faq-container").hide(); Denna gömmer innehållet, men kan jag på något sätt få fram innehållet genom vanlig CSS. Jag har provat med display och visibility men det vill sig inte riktigt.

Någon som har tips?

voigtann1Medlem sedan juni 20019 519 inlägg
#2

Jag förstå inte vad du menar med:

jqueryscriptet så finns $(".list-faq-container").hide(); Denna gömmer innehållet, men kan jag på något sätt få fram innehållet genom vanlig CSS. Jag har provat med display och visibility men det vill sig inte riktigt.

Du få nog kolla igenom autosuggest koden så att den också söker i dolda element(?)

bikicMedlem sedan juni 2006261 inlägg
#3

Jag fick löst det.

Jag gav innehållet som ska vara öppet en annan class som visas av jquery.

voigtann1Medlem sedan juni 20019 519 inlägg
#4

bikic skrev:

Jag fick löst det.

Jag gav innehållet som ska vara öppet en annan class som visas av jquery.

Hur gjorde du då?

bikicMedlem sedan juni 2006261 inlägg
#5

Jag gjorde följande:

// Toggle FAQ

        $(".list-faq-container").hide(); 
        $(".list-faq-container-open").show(); 

	$("div.trigger").toggle(function(){
		$(this).next(".list-faq-container, .list-faq-container-open").show();
		$(this).addClass("active");
		}, function () {
		$(this).next(".list-faq-container, .list-faq-container-open").hide();
		$(this).removeClass("active");
	});

<div class="trigger">Är Niklas bra på det mesta?</div>

<div class="list-faq-container-open">
        Ja det är han ;)
</div>
voigtann1Medlem sedan juni 20019 519 inlägg
#6

usch,
hade hellre kört med den html struktur du hade:

<div class="trigger">Är Niklas bra på det mesta?</div>

<div class="list-faq-container open">
        Ja det är han ;)
</div>

och bara lägga till "open" som en extra klass och kört jquery koden:

$(".list-faq-container:not(.open)").hide();

.Och bara köra addClass("open") och removeClass("open"), känns onödigt att behöva göra en helt ny CSS för .list-faq-container och .list-faq-container-open

134 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
131 ms — hämta tråd, inlägg och bilagor (db)