왜이 아주 기본적인 JS 드롭 다운 메뉴가 작동하지 않습니까?

Question

Codepen에서 작동하지만 로컬로 작동하지 않습니다. 나는 같은 디렉토리에 html, css, js 파일을 가지고 있으며 HTML 스 니펫에서 볼 수있는 것처럼 가져옵니다. js 파일에 대한 나의 경로가 올바르지 않을 수도 있지만 js 파일은 다른 모든 디렉토리와 동일한 디렉토리에 있으며 동일한 방식으로 내 CS 파일을 호출 할 수 있다고 제안되었습니다.

내가 생각할 수있는 유일한 것은 내 원고에 필요한 잘못된 jquery 및 jquery UI 파일을 가져 오는 것입니다.

제 질문은이 예제가 여기 http://codepen.io/WhiteWolfWizard/pen/DwKjc에서 작동하지만 내 로컬 컴퓨터에서는 작동하지 않는 이유는 무엇입니까?

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> 
<script type="text/javascript" src="menuscript.js"></script> 
<div class='dropdown'> 
    <h1 class='title'>Select</h1> 
    <ol class='drop'> 
    <li>Apple</li> 
    <li>Orange</li> 
    <li>Banana</li> 
    <li>Pineapple</li> 
    <li>Mango</li> 
    </ol> 
</div> 

CSS

.dropdown { 
    position: relative; 
    margin: 50px auto; 
    display: table; 
    font-family: sans-serif; 
    font-size: 11pt; 
    color: #FC3; 
    line-height: normal; 
    text-align: left; 
    font-smoothing: antialiased; 
} 
.dropdown .title { 
    cursor: pointer; 
    height: 45px; 
    padding: 0 20px; 
    border-radius: 5px; 
    display: block; 
    box-shadow: 0 0 0 1px #FC3; 
    line-height: 45px; 
} 
.dropdown .title:after { 
    content: ''; 
    float: right; 
    width: 0; 
    height: 0; 
    margin: 20px 0 0 20px; 
    border-width: 5px 4px 0; 
    border-style: solid; 
    border-color: #FC3 transparent transparent transparent; 
} 
.dropdown .drop { 
    position: relative; 
    top: 100%; 
    margin-top: 1px; 
    border-radius: 0 0 5px 5px; 
    display: none; 
    overflow: hidden; 
    box-shadow: 0 0 0 1px #FC3; 
} 
.dropdown .drop li { 
    cursor: pointer; 
    padding: 10px; 
} 
.dropdown .drop li:hover { 
    background: #FC3; 
    color: #FFF; 
} 

.select .title { 
    border-radius: 5px 5px 0 0; 
} 
.select .title:after { 
    transform: rotate(180deg); 
} 

JS

$('.dropdown .title').on('click',function(){ 
    $(this).parent().toggleClass('select').find('.drop').toggle(); 
}); 
$('.dropdown .drop li').on('click',function(){ 
    var $this = $(this), input = $this.text(); 
    $('.dropdown .title').text(input); 
}); 
    enter code here 

http://codepen.io/WhiteWolfWizard/pen/DwKjc

Answer 1

JS는 요소가 사용할 수있는 경우 실행해야합니다. 코드를 $ (function() {})에 넣으십시오.

$(function() { 
    $('.dropdown .title').on('click',function(){ 
     $(this).parent().toggleClass('select').find('.drop').toggle(); 
    }); 
    $('.dropdown .drop li').on('click',function(){ 
     var $this = $(this), input = $this.text(); 
     $('.dropdown .title').text(input); 
    }); 
});