如何在不使用semantic.css 的情况下在Semantic UI 中实现组件？

Question

I want to create a multi-selection dropdown using the Semantic UI dropdown module.

From the Semantic documentation, it says that I need to add the following code.

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>

As I am also using bootstrap in my project, I am facing the problem that the semantic.min.css is messing up the bootstrap layout. To avoid this, I tried using just the dropdown component.

<link rel="stylesheet" type="text/css" href="semantic/dist/components/dropdown.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>

This did fix the layout issue, but now there is no dropdown when I click on the dropdown box.

Any suggestions for what I can do?

Answer 1

You must to start the dropdown

$('.ui.dropdown')
  .dropdown()
;