Semantic UI Dropdown报错$(...).dropdown不是函数，功能失效

Hey there, let's troubleshoot this frustrating Semantic UI dropdown error together — I’ve dealt with this exact issue a handful of times, so here are the most common fixes to try:

1. Double-check your CDN loading order #

Semantic UI’s dropdown component depends entirely on jQuery, so you must load jQuery first, then Semantic UI’s JavaScript file. If you reverse this order, Semantic can’t attach the dropdown() method to jQuery, which causes the error.

Here’s the correct order:

<!-- Load jQuery FIRST -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- Then load Semantic UI JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

Verify this in your HTML — even a single misplaced script tag can break things.

2. Check for duplicate jQuery loads #

If jQuery gets loaded twice on your page (e.g., once from a CDN and once from a local file), the second load will overwrite the first instance. Since Semantic attaches its methods to the first jQuery instance, the second one won’t have the dropdown() method available.

Open your browser’s DevTools (Network tab) and filter for "jQuery" to see if multiple versions are being loaded. Remove any duplicates.

3. Wrap your dropdown initialization in a DOM-ready handler #

If you try to call $('.ui.dropdown').dropdown() before the page’s DOM is fully loaded, jQuery might not find the dropdown element — and even if it does, Semantic’s JS might not be ready yet. Always wrap your initialization code in a ready handler:

$(document).ready(function() {
  // Initialize dropdown after DOM is ready
  $('.ui.dropdown').dropdown();
});

Alternatively, you can place your script tag at the bottom of the <body> tag (right before </body>), which ensures the DOM is loaded before your code runs.

4. Confirm your element’s class names are correct #

Semantic UI’s dropdown requires the ui and dropdown classes (space-separated, not hyphenated). Make sure your HTML looks like this:

<div class="ui dropdown">
  <div class="text">Select an option</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">Option 1</div>
    <div class="item">Option 2</div>
  </div>
</div>

If you accidentally used ui-dropdown (hyphenated) instead of ui dropdown, your selector $('.ui.dropdown') won’t target the element — which can lead to confusion, even if the core error is about the method not existing.

5. Verify your CDN links are valid #

Occasionally, a typo in the CDN URL or a deprecated version can cause the Semantic JS file to fail loading. Check the Network tab in DevTools to ensure both jQuery and Semantic UI JS return a 200 OK status. If you see a 404, double-check the URL and consider using a stable, recent version of both libraries.

Bonus: Check for jQuery noConflict mode #

If your page uses $.noConflict() to avoid jQuery conflicts with other libraries, you’ll need to use the full jQuery keyword instead of $:

jQuery(document).ready(function() {
  jQuery('.ui.dropdown').dropdown();
});

If you’ve tried all these steps and still run into issues, check the browser console for other error messages — sometimes a separate JS conflict (e.g., with another plugin) can prevent Semantic’s dropdown from initializing properly.

内容的提问来源于stack exchange，提问作者dsomel21