javascript - semantic - menú desplegable de interfaz de usuario semántica no funciona
semantic ui dropdown search (6)
Como ya se mencionó, usted puede:
- Inicialice su menú desplegable con Javascript o
- Usa la clase
simple.
Hay una diferencia muy importante entre estas dos formas: mediante el uso de simple clase simple , no necesita Javascript de interfaz de usuario semántica para que su menú desplegable funcione . La clase simple utiliza :hover selector de :hover .
Tenga en cuenta que usar simple clase simple (no la inicialización de Javascript) no le dará buenos efectos de menú desplegable.
Por lo tanto, el siguiente código mostrará el menú desplegable sin Javascript de IU semántica en su página:
<div class="ui simple dropdown item">
He estado tratando de construir un menú utilizando la interfaz de usuario semántica. No puedo conseguir que los menús desplegables funcionen. Tomé una copia de los ejemplos del menú de la página y saqué todo excepto el menú en niveles y lo coloqué en un archivo separado. Solo el menú desplegable no funcionará, aunque no hay errores. ¿Alguien puede decirme lo que me he perdido?
<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>
Necesita inicializar su menú desplegable de la siguiente manera:
$(''.ui.dropdown'')
.dropdown();
Hay mas informacion HERE
Si inicializa con $(''.ui.dropdown'').dropdown(); También asegúrese de que su página hace referencia a dropdown.js
Si las respuestas dadas no funcionaron para ti, asegúrate de no estar usando bootstrap junto con la interfaz semántica
Una forma es JS donde necesita inicializar el script. Otra forma es agregar una clase "simple" a la lista desplegable
<div class="ui simple dropdown item">
funcionó conmigo cuando agregué la línea de función anterior
<script>
$(document).ready(function(){
$(''.ui.dropdown'') .dropdown();
});
</script>