WN - Skapa en dropdown-box

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Skapa en dropdown-box (https://www.wn.se/forum/showthread.php?t=36934)

eliasca

2009-05-19 16:30

Hej!

Jag är på jakt efter ett script som fungerar som en dropdown, fast istället för en meny eller liknande vill jag droppa en ruta som går bra att koda i. Lite som en whitebox, fast på samma yta som den klickbara dropdownlänken.

Jag tänker mig 2 länkar

LÄNK 1
LÄNK 2

när jag trycker på länk ett ska resultatet bli:

LÄNK 1
| En ruta att skriva
| vad som helst i
| eller placera bilder
| HTML helt enkelt
----------------------------
LÄNK 2

Den ska helst slide:a lite fade:ande. Hoppas ni förstår vad jag menar. Jag har tittat runt och hittat liknande javascript och tror att det borde finnas ett javascript för detta ändamål. Har någon stött på det? Är ingen haj på flash så undviker helst det!

Tack på förhand!

allstars

2009-05-19 18:11

jquery är ett javascript-bibliotek som är lätt att hantera så kolla in dokumentationen där. Det ser inte ut att vara några problem att göra det du är ute efter.

man får ändra lite men lite i denna stilen är det

Kod:

$(document).ready(function(){

 $("ul li a").click(function(){

         $(this).after("<div/>").siblings("div").hide().html("hej").slideDown(500);

 });

        });

allstars

2009-05-19 18:48

Kod:

        $(document).ready(function(){

 var i=0;

 $("ul li div").hide();

 $("ul li a").click(function(){

         var t_his = $(this);

         if (i==0){

         t_his.siblings("div").slideDown(300);

         i=1;

         }else{

         $("ul li div:visible").slideUp(300,function(){

  t_his.siblings("div").slideDown(300);

         });

         }

 });

        });

Ändrade lite efter lite tester

Det baserar sig på följande markup

Kod:

<ul>

 <li><a href="#">länk1</a><div>Donec ornare ante semper nisl sollicitudin vulputate. Proin lobortis elementum arcu. Vestibulum porta neque.</div></li>

 <li><a href="#">länk2</a><div>Integer ut sem. Sed felis erat, egestas a, venenatis ac, posuere eget, lectus. </div></li>

        </ul>

eliasca

2009-05-20 13:02

Tack så jättemycket för svaret. Hur kan jag styra länkarna på annat sätt än med li/ul?

allstars

2009-05-20 16:56

vad vill du ha då?

Citat:

<div class="container">
<div class="item">länk1<div>Donec ornare ante semper nisl sollicitudin vulputate. Proin lobortis elementum arcu. Vestibulum porta neque.</div></div>
<div class="item"länk2<div>Integer ut sem. Sed felis erat, egestas a, venenatis ac, posuere eget, lectus. </div></div>
</div>

Citat:

$(document).ready(function(){
var i=0;
$(".item div").hide();
$(".item a").click(function(){
*var t_his = $(this);
*if (i==0){
*t_his.siblings("div").slideDown(300);
*i=1;
*}else{
*$(".item div:visible").slideUp(300,function(){
* t_his.siblings("div").slideDown(300);
*});
*}
});
});

men du vet att du kan styra hur en lista (UL) ser ut med css, va?!

Alla tider är GMT +2. Klockan är nu 22:37.