ASP.Net MVCのセマンティックUIドロップダウンが機能しません。

クリックするとドロップダウンが表示されません。他の入力フィールドはこれを除いて期待どおりに動作しています。ドロップダウンフィールドは、フォームタグのフィールドの1つです。ASP.Net MVCのセマンティックUIドロップダウンが機能しません。

<div class="field"> 
    <div class="ui selection dropdown"> 
     <input type="hidden" name="gender"> 
     <i class="dropdown icon"></i> 
     <div class="default text">Select Gender</div> 
     <div class="menu"> 
      <div class="item" data-value="0">Male</div> 
      <div class="item" data-value="1">Female</div> 
      <div class="item" data-value="2">Other</div> 
     </div> 
    </div> 
</div>

bodyタグの最後の直前のscriptタグで初期化しました。先頭のタグを入れたり、window.onloadと同様にdocument.readyを追加しようとしましたが、すべて問題を解決しません。

<script> 
    $('.ui.dropdown').dropdown(); 
</script>

私はSemantic-UI ASP.NET MVCをNugetにインストールしました。

以下のソリューションを試しましたが、役に立たないです。

Semantic-ui dropdown is not working

Semantic UI Dropdown is not showing the drop down but everything else is working

出典

2016-10-27 jenna_3108

何使いのブラウザではJavaScriptが見えますか？ – VtoCorleone

@VtoCorleone上記でスクリプトタグを追加しました。 –

私は頭タグにこのスクリプトを追加することで、今で示されるドロップダウンリストを得ることができました。

<script> 
    $(document).ready(function() { 
     $('#divDropdown').click(function() { 
      var clicks = $(this).data('clicks'); 
      if (clicks) { 
       $('#divDropdown').removeClass('active visible'); 
       $('#dropdownMenu').removeClass('visible'); 
      } else { 
       $('#divDropdown').addClass('active visible'); 
       $('#dropdownMenu').addClass('visible'); 
      } 
      $(this).data("clicks", !clicks); 
     }); 
    }); 
</script>

右クリックすると、.dropdownで初期化するのが簡単な場合があります。しかし、何とかそうではありません。

私はまだ誰かがこれよりも優れた解決策を提案するのを待っています。おかげさまで

出典

2016-10-28 03:13:56

上記のソリューションが機能するのは、コードが実行前にDOMがロードされるのを待っているからです。 – VtoCorleone

ヘッドタグ
内部セマンティックCSSは、その後
セマンティックUI JSが含まれ、あなたのbodyタグの終わりにjqueryのをインクルード
$(document).ready(function() { //code goes here });
内セマンティックドロップダウンから、それは意志をこのようにあなたのコードを入れてくださいすべてがロードされた後に実行され（jqueryとsemantic）、動作します。

例：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 

     <title>Test semantic</title> 

     <link rel="stylesheet" type="text/css" href="semantic2/semantic.min.css"> 
    </head> 

    <body> 

     <div class="field"> 
      <div class="ui selection dropdown"> 
       <input type="hidden" name="gender"> 
       <i class="dropdown icon"></i> 
       <div class="default text">Select Gender</div> 
       <div class="menu"> 
        <div class="item" data-value="0">Male</div> 
        <div class="item" data-value="1">Female</div> 
        <div class="item" data-value="2">Other</div> 
       </div> 
      </div> 
     </div> 

     <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 
     <script type="text/javascript" src="semantic2/semantic.min.js"></script> 

     <script> 
      $(document).ready(function() { 
       $('.ui.dropdown').dropdown(); 
      }); 
     </script> 

    </body> 
</html>

出典

2016-11-08 19:33:10 sbvr

ASP.Net MVCのセマンティックUIドロップダウンが機能しません。

答えて

関連する問題