시맨틱 UI 메뉴가 작동하지 않습니다.

Question

시맨틱 UI 메뉴로 작업하려고합니다.

하지만 작동하지 않을 수 있습니다. 예를 들어 메뉴의 항목을 클릭하면 활성 상태가 변경되지 않습니다. 웹에서 예제를 찾지 못했습니다.

HTML :

<div class="ui grid"> 
     <div class="one wide row"> 
      <div class="ui green menu"> 
       <a class="active item"> 
        <i class="home icon"></i> Home 
       </a> 
       <a class="item"> 
        <i class="mail icon"></i> Messages 
       </a> 
       <div class="right menu"> 
        <div class="item"> 
         <div class="ui transparent icon input"> 
          <input type="text" placeholder="Search..."> 
          <i class="search link icon"></i> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

JS는 :

$(document).ready(function() { 
    $('.ui .green .menu').menu(); 
}); 

나는 의미-UI를 웹 사이트에서 코드를 촬영했다.

일부 도움을 받으실 수 있습니다.

Answer 1

여기에 자신의 데모 사이트에

DEMO

스크린 샷 비슷한 핸들러입니다. Semantic UI example

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

Answer 2

시도 :

$(document).ready(function() { 
    $('.ui.green.menu').menu(); 
}); 

클래스 ui, green 및 menu은 동일한 요소에 적용됩니다. 그들은 서로의 자손이 아닙니다.

$('.ui.green.menu') 
    .on('click', '.item', function() { 
     if(!$(this).hasClass('dropdown')) { 
     $(this) 
      .addClass('active') 
      .siblings('.item') 
      .removeClass('active'); 
     } 
    }); 

Answer 3

이를 사용하여 메뉴를 jQuery를 함께 살 수 있도록하려면 :