"Ajax" dropdown, hur gör man?

FunTrix · 2010-03-19, 00:04

Tycker nog att Jquery är mer det jag är ute efter.

Dock så får jag inte riktigt att fungera, jag har ett väldigt simpelt test:

Kod:

$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready (a little sooner that page load)
  $('#slickbox').hide();
  
 // shows and hides and toggles the slickbox on click  
  $('#slick-show').click(function() {
    $('#slickbox').show('slow');
    return false;
  });
  $('#slick-hide').click(function() {
    $('#slickbox').hide('fast');
    return false;
  });
  $('#slick-toggle').click(function() {
    $('#slickbox').toggle(400);
    return false;
  });

 // slides down, up, and toggle the slickbox on click    
  $('#slick-down').click(function() {
    $('#slickbox').slideDown('slow');
    return false;
  });
  $('#slick-up').click(function() {
    $('#slickbox').slideUp('fast');
    return false;
  });
  $('#slick-slidetoggle').click(function() {
    $('#slickbox').slideToggle(400);
    return false;
  });
});

Kod:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv"> 
	<head> 
		<title>Jquery test</title> 
		<script type="text/javascript" src="slicker.js"></script> 
	</head> 
<body>

<div id="slickbox">This is the box that will be shown and hidden and toggled at your whim. :)</div> 
<a href="#" id="slick-slidetoggle">Slide toggle the box</a>

</body>
</html>

Problemet som jag har är att min div slickbox visas direkt och ingenting händer då jag klickar på knappen. Jag har kollat att slicker.js ligger i rätt mapp etc, vad är det jag har missat?
exemplet är från denna sida:
http://www.learningjquery.com/2006/0...-show-and-hide

olsserik · 2010-03-19, 00:17

Hej,
Testa följande:
I headen:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".knapp-id").click(function(){
$("#toggler").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>

I bodyn:

<div id="toggler">Ditt innehåll som ska togglas fram</div>
<a href="#" class="knapp-id">Klicka mig för att toggla!</a>

Och i CSS:en, display:none på divven...

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

"Ajax" dropdown, hur gör man?