Javaスクリプトを追加した後、ドロップダウンメニューがIndex.htmlで機能しない

Question

私は個人的なウェブサイトを作成していますが、デスクトップ上でドロップダウンを取得できない場合は、モバイルdevise navでjsをクリックしてショーナビ。

/**Header**/ 
.nav { 
    height: 61px; 
    background: #381120; 
} 

.logo a{ 
    float: left; 
    text-decoration: none; 
    color: #7e7e7e; 
    font-size: 43px; 
    padding-top: 11px; 
    padding-left: 30px; 
} 

.nav ul { 
    margin: 0; 
    padding: 0; 
    float: right; 
} 

.nav ul li { 
    list-style: none; 
    float: left; 
    display: block; 
    padding: 19px; 
} 

.nav ul li a { 
    color: #7e7e7e; 
    text-decoration: none; 
    font-size: 25px; 
} 

.nav ul ul.sub-nav { 
    display: none; 
    background: #381120; 
    width: auto; 
    position: absolute; 
} 

.nav ul li:hover > ul { 
    display: block; 
} 

.nav ul ul li { 
    float: none; 
    padding-left: 24px; 
} 

.nav ul li a.active { 
    color: #08a1c7; 
} 

.nav ul li a:hover { 
    color: #efefef; 
} 

と：：ここ

.menu-trigger{ 
    padding-top: 16px; 
    padding-right: 30px; 
    font-size: 25px; 
    text-align: center; 
    display: none; 
    float: right; 
    color: #7e7e7e 
} 

.menu-trigger p{ 
    color: #7e7e7e 
} 

    /**480px**/ 


@media only screen and (max-width : 480px) { 

    .menu-trigger{ 
     display: block; 
    } 

    .nav, .mobile-nav{ 
     display: none; 
    } 

    .nav-expanded{ 
     display: block; 
    } 

    .nav ul li{ 
     float: none; 
     border-bottom: 1px solid #7e7e7e; 
    } 

    .nav ul li:last-child{ 
     border-bottom: none; 
    } 
} 

は、JSは、私はここにそれを置くのを忘れて申し訳ありませんです：

しかし、そのは、Index.htmlと

<div class="content"> 
    <div class="header"> 
      <div class="logo"><a href="assets/img/logo.png" alt="GM">GM</a> 
      </div> 
     <span class="menu-trigger">Menu</span> 
     <nav class="nav clearfix"> 
      <ul class="clearfix"> 
       <li><a class="active" href="index.html">Home</a> 
       </li> 
       <li><a href="about.html">About</a> 
       </li> 
       <li><a href="#">Portfolio <i class="fa fa-angle-down fa-1"></i></a> 
        <ul class="sub-nav"> 
         <li><a href="music.html">Music</a> 
         </li> 
         <li><a href="code.html">Code</a> 
         </li> 
        </ul> 
       </li> 
       <li><a href="contact.html">Contact</a> 
       </li> 
      </ul> 
     </nav> 
     <!-- end of Nav --> 
    </div> 
    </div> 

CSSのみで動作していません

jQuery(document).ready(function() { 

    jQuery(".menu-trigger").click(function() { 

     jQuery(".nav").slideToggle(400, function() { 
      jQuery(this).toggleClass("nav-expanded").css('display', ''); 
     }); 

    }); 

}); 

Answer 1

あなたは本当にできるはずですCSSだけでこれをアニメーション化しましょう。クリックアクションのためのもの以外にも、これのためにjQueryは必要ありません。

また、これはそうではないかもしれませんが、過去に私はこのようなクリックハンドラを書いて、奇妙なバグを回避しなければなりませんでした。 jQueryのSlideToggleは、いくつかの不具合を引き起こす可能性があり、実際にはアニメーションメニューを作成するための素晴らしい方法ではありません。 slideToggle（）を避けるようにしてください。

$("[your-selector]").on("click",function(){ 
    /// do something... 
}); 

Answer 2

コードでjsfiddleを作成しましたが、正常に動作しているようです。そのことはあなたが尋ねるものからはっきりとは分かりませんが、私はあなたのドロップダウンが携帯電話の画面上で動かないということを推測しています。問題は、HTMLファイルにjqueryをインポートすることです。それはあなたの問題

jQuery(document).ready(function() { 

    jQuery(".menu-trigger").click(function() { 

     jQuery(".nav").slideToggle(400, function() { 
      jQuery(this).toggleClass("nav-expanded").css('display', ''); 
     }); 

    }); 

}); 

Answer 3

ネヴァーマインドを解決する可能性があります私は二度、それはまだすべてのご協力いただきありがとうござい破る原因

<div class="content">///content goes here</div> 

を追加し、それを修正します。