[jQuery] Wysuwany panel i zmiana klasy Opcje

[oomaster]

Witam,

Kompletnie nie mogę zaradzić problemu który mi się pojawił. Otóz mam kod

[HTML] pobierz, plaintext 
<a href="#" id="link"><div id="hide"></div></a>
 
<p id="more" style="display: none;">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>
[HTML] pobierz, plaintext 

Mało poprawny ale jest (IMG:style_emoticons/default/winksmiley.jpg)

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript">
	$(document).ready(
	function()
	{	
		$("#link").click(
		function()
		{
			$("#more").toggle("normal");
		}).toggle(function() { $(this).html("<div id=hide></div>"); }, function() { $(this).html("<div id=hideou></div>"); });
	});
</script>
[JAVASCRIPT] pobierz, plaintext 

Chodzi o to aby po kliknięciu w ahrefa link wyświetliła się treść more i zmieniła klasa i w odwrotnie. Czy w ogóle istnieje takie coś w jQuery jak .html ? Jak to zrealizować ?

[230005]

[JAVASCRIPT] pobierz, plaintext 
 
$('#link').toggle(function() {
  $('#more').show('slow').attr('class', 'nowa_nazwa');
}, function() {
  $('#more').hide('slow').attr('class', 'stara_nazwa');
}
 
[JAVASCRIPT] pobierz, plaintext 

[oomaster]

Być może źle się zrozumieliśmy (IMG:style_emoticons/default/smile.gif) Klasa div id=hide ma zmieniać się na div id=hideou. Reszta klas zostaje bez zmian jakichkolwiek

[erix]

Chodzi o to aby po kliknięciu w ahrefa link wyświetliła się treść more i zmieniła klasa i w odwrotnie. Czy w ogóle istnieje takie coś w jQuery jak .html ? Jak to zrealizować ?

Owszem, istnieje. Wystarczy sprawdzić w dokumentacji.

Klasa div id=hide ma zmieniać się na div id=hideou. Reszta klas zostaje bez zmian jakichkolwiek

[JAVASCRIPT] pobierz, plaintext 
$().removeClass('hide').addClass('hideou');
[JAVASCRIPT] pobierz, plaintext 

To jest KLASA, a nie identyfikator - uściślij, czego chcesz używać. Domniemam, że klasy. (IMG:style_emoticons/default/winksmiley.jpg)

[oomaster]

Dzięki wielkie już teraz wszystko elegancko chodzi.

Ale jak można zmienić sposób wyłaniania panelu ? Bo aktualnie wyjawia się z lewej strony buduje w prawą i w dół a jak zrobić aby równą szerokością pojawiał się ? Mam nadzieje ,że wiecie o jaki efekt chodzi (IMG:style_emoticons/default/smile.gif)

[vokiel]

To co chcesz zrealizować, możesz zrobić na wiele, wiele sposobów.

Rozumiem, że chcesz mieć przycisk, który pokaże jakiś akapit poniżej i sam się zmieni, że został rozwinięty (np ma napis pokaż i chcesz go zamienić na ukryj)

[HTML] pobierz, plaintext 
<a href="#" id="link">obrazkowy rozwiń</a>
<p  id="more">bla bla bla</p>
[HTML] pobierz, plaintext 

Po kliknięciu w ten obrazek rozwiń zmieniasz jego klasę na zwiń, a paragraf rozwijasz w dół, bądź zwijasz. Czyli

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
    $('#link').click(function(){
        $(this).toggleClass('hide'); // możesz ostylować element w stanie rozwiń, a klasa hide zmieni go w drugi stan    
        $('#more').slideToggle();
    });
});
[JAVASCRIPT] pobierz, plaintext 

Możesz też użyć toggle na link

[JAVASCRIPT] pobierz, plaintext 
$('#link').toggle(function() {
    $(this).removeClass('hide');
    $('#more').slideDown();
}, function() {
    $(this).addClass('hide');
    $('#more').slideUp();
}
[JAVASCRIPT] pobierz, plaintext 

[oomaster]

Wszystko działa sama funkcja .slideToggle() rozwiązała problem (IMG:style_emoticons/default/smile.gif)

Ten post edytował oomaster 17.04.2010, 13:27:49

[meteopata]

Witam,
dołączę się do tematu ze względu na pokrewieństwo.

Mam tabele generowaną w php o zmiennej ilości wierszy w zależności od wybranego dokumentu który przedstawia ów tabela.
Każdy z wierszy posiada ukryty wiersz poniżej w którym są informacje szczegółowe dotyczące wiersza jawnego.
Moim celem jest odkrycie tylko jednego wiersza ukrytego należącego do wiersza "macierzystego" poprzez kliknięcie w zawartość wiersza odkrytego.

Chciałem również zrobić to w taki sposób, że kiedy kliknie się w inny jawny wiersz, otworzy się ukryta zawartość, a schowa się zawartość wiersza poprzednio odkrytego.


-- wiersz jawny --
- > wiersz ukryty --
-- wiersz jawny --
- > wiersz ukryty --
itd

Chciałem użyć zmiany class z .zamkniety na .otwarty gdzie

Klasy css

[CSS] pobierz, plaintext 
.zamkniety { display: none; }
.otwarty {  }
[CSS] pobierz, plaintext 

Skrypt wywołujący zmianę klasy wiersza

[JAVA] pobierz, plaintext 
<script type= "text/javascript">
function rozwinwiersz(otwarty, zamkniety) {
var el = document.getElementById(zamkniety);
el.className = otwarty;
}
</script>
[JAVA] pobierz, plaintext 

Link aktywujący zmianę

[HTML] pobierz, plaintext 
<a href="java script:void(rozwinwiersz('otwarty', 'zamkniety'))">Zmień klasę</a>
[HTML] pobierz, plaintext 

Skrpyt działa, ale odkrywa tylko pierwszy ukryty wiersz w tabeli i nic poza tym.

Wiem, że istnieje sposób natomiast nie wiem jaki, gdyż nie jestem biegłym programistą. Czy mogę prosić o wskazówki?

________________________________________
Witam ponownie,

zrobiłem pewien postęp gdyż żadna z metod nie była skuteczna.
Zagłębiłem się w prezentowane tutaj przykłady i co następuje.

W tabeli są 4 wiersze, widoczne są parzyste czyli wiersz 0 i 2, nieparzyste są ukryte display: none.

Wiersze są zbudowane tak samo żeby mogły wyzwolić funkcję odkrywającą ukryty pod sobą wiersz, jednak ten skrypt odkrywa tylko pierwszy ukryty wiersz, chowając macierzysty.

Jak zrobić tak by każda następna para działała według zasady odkryj wiersz ze szegółami, ukryj poprzedni odkyty, nie zaś macierzysty?

Z góry dziękuję i pozdrawiam

[HTML] pobierz, plaintext 
 
<HTML>
<HEAD>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<style type="text/css" media="all">
 
		.ukryty { display: none; }
		.widoczny {  }
	</style>
 
</HEAD>
<BODY>
 
<script type="text/javascript">
 
$(document).ready(function(){
    $('#rozwin').click(function(){
        $(this).toggleClass('ukryty'); // jeśli usunę klasę 'ukryty', wiersz macierzysty pozostanie widoczny tu nie ma problemu ale nie wiem jak to wykorzystać do przełączania widoczności wierszy dzieci
        $('#ukryty').slideToggle();
    });
});
 
</script>
 
<TABLE border='1'>
	<TR id="rozwin">     <!-- pierwszy wiersz macierzysty, klikając gdziekolwiek na nim, odkryje się wiersz dziecko -->
		<TD>
			rozwiń 1
		</TD>
		<TD> dane1  dane</TD>
		<TD>dane dane</TD>
		<TD>dane 6 dane</TD>
		<TD>go</TD>
	</TR>
 
	<TR id="ukryty" style="display: none;"> <!-- wiersz dziecko, rozwija się bez problemu -->
		<TD>szczegoly</TD>                       <!-- właściwie to jest jeden problem, wyświetla tabelę jako display: block, jak to wyświetlić jako display'' bez block -->
		<TD>itd3123</TD>
		<TD>itd</TD>
		<TD>itd3123</TD>
		<TD>itd</TD>
	</TR>
 
	<TR id="rozwin"> <!-- wiersz macierzysty drugi, nie działa nawet jak spróbuję odpalić go jako pierwszy, nie działa również, na wiersz ukryty wyżej -->
		<TD>           <!-- wierszy będzie zmienna ilość od jednego, przez 3 aż po sto ileś -->
			rozwiń 2 
		</TD>
		<TD> dane 4 dane</TD>
		<TD>dane 5 dane</TD>
		<TD>dane4  dane</TD>
		<TD>go</TD>
	</TR>
 
	<TR id="ukryty" style="display: none;"> <!-- siłą rzeczy ten wiersz jest ukryty cały czas
		<TD>szczegoly 2 </TD>
		<TD>itd 1</TD>
		<TD>itd</TD>
		<TD>itd</TD>
		<TD>itd 12312</TD>
	</TR>
 
</TABLE>
 
</BODY>
</HTML>
 
[HTML] pobierz, plaintext 

Ten post edytował meteopata 1.08.2012, 16:19:44