Semantic UI's dropdown is not working. When I click the dropdown component, it can't unfold.
I got the solution from stackoverflow site.
Putting
<script>
$('.ui.dropdown').dropdown();
</script>
right before the closing </body>
tag. You're running the dropdown script before these elements $('.ui.dropdown')
even exist in the DOM so there's nothing to attach to.
For example,
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="css/semantic.css" />
<script src="js/jquery.min.js"></script>
<script src="js/semantic.min.js"></script>
<title>load a file</title>
</head>
<body>
<br/>
<div class="ui selection dropdown">
<input name="gender" type="hidden" /> <i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="male" data-text="Male">
<i class="male icon"></i> Male
</div>
<div class="item" data-value="female" data-text="Female">
<i class="female icon"></i> Female
</div>
</div>
</div>
<br />
<br />
<script type="text/javascript">
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
then it's working.