la sémantique de l'interface utilisateur menu déroulant ne fonctionne pas
J'ai essayé de construire un menu à l'aide de la Sémantique de l'INTERFACE utilisateur. Je ne peux pas vous les menus déroulants pour le travail à tous. J'ai pris une copie de la page Des exemples de Menu et en tira tout sauf les niveaux de menu et les placer dans un fichier séparé. Seul le menu déroulant ne fonctionne pas, si il n'y a pas d'erreurs. Quelqu'un peut me dire ce que j'ai raté?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Script-Type" content="text/jscript" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" class="ui" href="http://semantic-ui.com/build/packaged/css/semantic.min.css">
<link rel="stylesheet" type="text/css" href="http://semantic-ui.com/stylesheets/semantic.css">
<script src="http://semantic-ui.com/javascript/library/jquery.min.js"></script>
<script src="http://semantic-ui.com/javascript/library/history.js"></script>
<script src="http://semantic-ui.com/javascript/library/easing.js"></script>
<script src="http://semantic-ui.com/javascript/library/ace/ace.js"></script>
<script src="http://semantic-ui.com/javascript/library/tablesort.js"></script>
<script src="http://semantic-ui.com/javascript/library/waypoints.js"></script>
<script src="http://semantic-ui.com/build/packaged/javascript/semantic.min.js"></script>
<script src="http://semantic-ui.com/javascript/semantic.js"></script>
</head>
<body class="menu" >
<div class="ui tiered menu">
<div class="menu">
<a class="active item">
<i class="users icon"></i>
Friends
</a>
<a class="item">
<i class="grid layout icon"></i> Browse
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
<div class="right menu">
<div class="item">
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="search icon"></i>
</div>
</div>
<div class="ui dropdown item">
More <i class="icon dropdown"></i>
<div class="menu">
<a class="item"><i class="edit icon"></i> Edit Profile</a>
<a class="item"><i class="globe icon"></i> Choose Language</a>
<a class="item"><i class="settings icon"></i> Account Settings</a>
</div>
</div>
</div>
</div>
<div class="ui sub menu">
<a class="active item">Search</a>
<a class="item">Add</a>
<a class="item">Remove</a>
</div>
</div>
</body>
</html>
- avez-vous essayé
$(".dropdown").dropdown()
d'init?
Vous devez vous connecter pour publier un commentaire.
Vous devez initialiser votre déroulant comme suit:
Il n'y a plus d'informations ICI
Une façon est JS où vous avez besoin d'initialiser le script. Autre façon de faire est d'ajouter une classe "simple" pour déroulante
Comme il a été déjà mentionné, vous pouvez soit:
simple
classe.Il y a une différence très importante entre ces deux manières: à l'aide de
simple
classe, vous n'avez pas besoin Sémantique de l'INTERFACE utilisateur de Javascript de votre menu pour le travail. Lesimple
classe utilise:hover
sélecteur.Veuillez noter que l'utilisation de
simple
classe (pas Javascript d'initialisation) ne vous donnera pas une belle liste déroulante effets.Donc le code suivant affichera menu déroulant sans la Sémantique de l'INTERFACE utilisateur de Javascript dans votre page:
Si vous initialisez avec
$('.ui.dropdown').dropdown();
aussi assurez-vous que votre page de références dropdown.jsil a travaillé avec moi quand j'ai ajouté la fonction de la ligne au-dessus de
JS:
si les réponses données ne fonctionne pas pour vous, assurez-vous que vous n'êtes pas en utilisant bootstrap avec la sémantique de l'interface utilisateur