11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Script Toggle qui marche pas

Bonjour,
J'ai essayé de faire un petit Javascript, mais ca ne marche pas je tourne en rond sans trouver la solution. Merci pour votre aide. 

<nav>
<a class="dropdown-toggle" href="#" title="Menu">Menu</a>
<ul id="false" class="dropdown">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</nav>

jQuery('ul.dropdown').hide();
jQuery('a.dropdown-toggle').click(function() {
   		jQuery('ul.dropdown').slideToggle(400);
   		return false;
   	});
  

nav {
  position: relative;
}
.dropdown-toggle {
  padding: .5em 1em;
  background: #777;
  border-radius: .2em .2em 0 0;
}
ul.dropdown {
  display:none;
  position: absolute;
  top: 100%;
  margin-top: .5em;
  background: #777;
  min-width: 12em;
  padding: 0;
  border-radius: 0 0 .2em .2em;
    li {
      list-style-type: none;
      a {
        text-decoration: none;
        padding: .5em 1em;
        display: block;
      }
   }
}
ceci fonctionne
document.ready
$ ou jquery
=========================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ovh unused</title>
<script type="text/javascript" src="./jquery-1.10.2.js"></script>
<script>
$(document).ready(function(e) {
$('ul.dropdown').hide();
$('a.dropdown-toggle').click(function() {
$('ul.dropdown').slideToggle(400);
});
});
</script>
<style type="text/css" rel="stylesheet" >
nav {
position: relative;
}
.dropdown-toggle {
padding: .5em 1em;
background: #777;
border-radius: .2em .2em 0 0;
}
ul.dropdown, bottom.dropdown {

position: absolute;
top: 100%;
margin-top: .5em;
background: #777;
min-width: 12em;
padding: 0;
border-radius: 0 0 .2em .2em;
li {
list-style-type: none;
a {
text-decoration: none;
padding: .5em 1em;
display: block;
}
}
}
</style>
</head>
<body>
<nav>
<a class="dropdown-toggle" href="#" title="Menu">Menu</a>
<ul id="false" class="dropdown">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</nav>
</body></html>
======================================
Modifié par 75lionel (29 Apr 2015 - 01:15)
Oui, pour préciser la première réponse tu as dans les CSS un display: none sur ton ul.dropdown.

Donc il n’apparaît jamais. Logique.
Sujet clos
Aller à