Non working example - Investigation


#1

Hello,
I’m trying to create my pages with documentation example. But when examples’ objects needs to have an action, none respond.
I’m currently focused on the menu object, and I tried to create the first inverted menu:
https://semantic-ui.com/collections/menu.html#inverted
But when I clicked on a different item, nothing happen. (Active attribute was not given to another item).

I’ve tried:

  • fully installed (with help of documentation) – in a nodejs project using expressjs and ejs,
  • simply use CDN link – in a raw index.html page: https://pastebin.com/uRdq4jbx .

Even this last try didn’t work. I think I missed someone, but I read the documentation for a long time. I didn’t find what I’m doing wrong (the example I will paste is a last chance to make it work).
I’m really sorry, I know if I didn’t find some piece of solution means I’m the main core of the problem. But I really appreciate the design of semantic-ui and I would be pleasured to be able to use it correctly.

Such as a good French, after the complaining, comes the solution.
I found some advice which considering using this code:

   $(document)
     .ready(function() {
       $('.ui.menu .ui.dropdown').dropdown({
         on: 'hover'
       });
       $('.ui.menu a.item')
         .on('click', function() {
           $(this)
             .addClass('active')
             .siblings()
             .removeClass('active')
           ;
         })
       ;
     })
   ;

I’m quite satisfied of the solution (because it works, but as an engineer, I’m wondering why the initial solution don’t work. Did I miss something that forced me to used more jscode than the documentation ?