Unterpunkte öffnen

[romeo046]

Hallo :)

ich bin neu hier und beschäfftige mich seit kurzem HTML.
Meine Website besteht derzeit aus in einer Tabelle angeordneten Elementen. Darunter auch Bilder. Nun möchte ich diesen Bildern gern die Funktion zuweisen, dass, wenn ich auf eines drauf klicke, sich darüber seine Unterpunkte öffnen.
Ich hab schon einiges ausprobiert aber ich krieg es nicht hin :/
Das ganze soll so aussehen, dass der untere Teil der Seite nach unten geht, und der obere fest bleibt. Ich hatte überlegt, hierfür eine Zeile zwischen dem Titelbild und dem unteren Teil einzufügen, und dann dort eine div einzufügen, welche mit toggle() sich öffnet aber das klappte nicht.

Hier mein jQuery Code

<script type="text/javascript">
(document).ready(function(){
03 $("#sobo-einausblenden").hide();
04
05 $("sozial").click(function () {
06 $("#sobo-einausblenden").slideToggle("slow");
07 });
08
09 });
});
</script>

Hier der entsprechende HTML Code
<tr>
<td>
<div id="sozial">
<b>Bereich für social bookmarks</b><br>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td id="farbe">
<p id="socialbookmarksanzeigen">

<a href="#" id="sobo-einausblenden"> <img src="Visualisierungsversuch/Sonnenblume.jpg" alt="Blume" width="170px" height="140px" id="sobo-einausblenden">

</p>

</td>

Wäre super wenn ihr mir helfen könntet :)

 

[Tronjer]

Vergiss erstmal das Tabellenlayout. Für die Anordnung von HTML-Elementen ist ausschließlich CSS zuständig. Entweder statisch oder im Ausnahmefall dynamisch per JS zugewiesen. Außerdem ist das <b> deprecated.

Der Code:
$("sozial").click(function () {
kann schon deshalb nicht funktionieren, weil dort die Raute für das Div fehlt. Sinnvoller wäre es hier allerdings mit Klassen zu arbeiten. Mal angenommen, die Aufgabe heißt: Beim Klick auf ein Bild soll die dazugehörige Liste mit den Unterpunkten abwechselnd ein- und ausgeblendet werden, könnte das etwa so aussehen:

<div>
  <img class="social" src="irgendwas.png" alt="irgendwas">
  <ul>
    <li> ...... </li>
  </ul>
<div>

$('.social').on('click', function() {
  $(this).next('ul').slideToggle();
})

 

[romeo046]

Hi, vielen Dank erstmal für deine Hilfe.
Würdest du dann alle Bilder auf der Seite per <div> definieren und per css anordnen? Falls ja macht das dann mehr Sinn das mit relativ oder absolut zu machen?

In deinem Code

$(this).next('ul').slideToggle();

gibst du der "ul" ja keine id. Geht das dennoch, dass ich das Element aufrufe? Wenn ich mehrere habe müsste ich ja dann doch eine id geben oder reicht das, wenn die in einer <div> sind damit erkannt wird welche ich meine?

LG

 

[Tronjer]

Würdest du dann alle Bilder auf der Seite per <div> definieren und per css anordnen? Falls ja macht das dann mehr Sinn das mit relativ oder absolut zu machen?

Weder relativ noch absolut sondern nur mit margin. Aber baue doch erstmal ein einziges Div.

gibst du der "ul" ja keine id. Geht das dennoch, dass ich das Element aufrufe? Wenn ich mehrere habe müsste ich ja dann doch eine id geben oder reicht das, wenn die in einer <div> sind damit erkannt wird welche ich meine?

Selektoren in jQuery lassen sich genauso wie in CSS ansprechen. Du kannst natürlich auch mit Klassen arbeiten, aber im obigen Kontext reicht es zu sagen: Nimm ausgehend von der Position des aktuellen Bildes die nächste <ul>.

 

[romeo046]

Ok, und wie kann ich die Richtung in der es sich öffnet bestimmen? ich möchte ja das es nach oben hin aufklappt....

 

[Tronjer]

Ok, und wie kann ich die Richtung in der es sich öffnet bestimmen? ich möchte ja das es nach oben hin aufklappt....

In dem du dir erst die Basics aneignest und anschließend zu fortgeschrittenen Technologien übergehst. Was dir vielleicht vorschwebt oder du an anderer Stelle gesehen hast, ist in aller Regel von Leuten erstellt worden, die über langfristige Praxis verfügen. So etwas lernt man weder in 3 Wochen noch in 6 Monaten.

jQuery slideToggle() verbindet das CSS Attribut display mit einer Animation. Wenn du etwas von unten nach oben sliden lassen willst, solltest du dich vorab mit dem entsprechenden CSS3 Attribut beschäftigen, es verstehen und sicher anwenden können, bevor du das an einen Eventlistener delegierst.
http://www.w3schools.com/cssref/css3_pr_animation-direction.asp