Простой jQuery не загружается

Question

Я пытаюсь переучивать HTML/CSS/JavaScript и сталкиваться с проблемой с сайтом, который я создаю. Я на Squarespace и пытаюсь реализовать jQuery. У меня есть простой код, и он не будет работать. Пожалуйста, дайте мне знать, что я делаю неправильно.

Это в моей "Заголовок страницы Code Injection"

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 

И это в моей фактической странице:

<div id="accordion"> 

<h3>Section 1</h3> 
    <div> 
    <p> 
     Blah 
    </p> 
    </div> 
    <h3>Secion 2</h3> 
    <div> 
    <p> lalala 
    </p> 
    </div> 
</div> 

мне нужно объявить "текст/JavaScript" ли? Я попытался добавить «https», объявив его HTML5 и т. Д.

Пожалуйста, помогите! Я искал вокруг.

спасибо.

Answer 1

Я предполагаю, что вы хотите на самом деле использовать аккордеон виджет JQuery UI? В этом случае вам нужно запустить некоторый код, чтобы сообщить jQuery, что вы хотите это сделать.

После ваших тегов импортировавших два сценария, добавьте это:

<script> 
$(function() { 
    $("#accordion").accordion(); 
}); 
</script> 

Это говорит JQuery, чтобы найти тег с идентификатором accordion и запустить функцию .accordion() на нем, что в JQuery UI превращает его в виджет аккордеона.

Также обратите внимание, что протокол меньше URL-адресов разработан таким образом, что вы можете переключаться между http: и https, не меняя свой код. К сожалению, это не сработает, если вы используете свою страницу из файловой системы (file:), потому что она попытается загрузить сценарии с вашего локального жесткого диска. Явно добавлю http: в начале URL-адреса, если вы работаете локально.

Answer 2

Если вы используете local, тогда он будет искать file://, которого не существует. Используйте это:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
<script>$(function() {$("#accordion").accordion();});</script> <!-- To call accordion--> 

Edit: Использование //, взгляните на ошибки в JS консоли:

Answer 3

Чтобы использовать виджет аккордеон UI, вам нужно создать его экземпляр, как это:

<script> 
    $(function() { 
    $("#accordion").accordion(); 
    }); 
    </script> 

после загрузки внешних источников.

Это находится в документации: http://jqueryui.com/accordion/

Нажмите кнопку "View Source" ссылку.

Answer 4

Для того, чтобы использовать аккордеон JQuery UI, вам нужно настроить:

<script> 
    $(function() { 
    $("#accordion").accordion(); 
    }); 
</script> 

Кроме того, убедитесь, что ваш HTML разметка соответствует тому, что ожидается аккордеона плагин:

<div id="accordion"> 
    <h3>Section 1</h3> 
    <div> 
     <p>Lorem</p> 
    </div> 
     <h3>Section 2</h3> 
    <div> 
     <p>Ipsum</p> 
    </div> 
</div> 

Наконец, убедитесь, что вы также включая CSS для JQuery UI:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

Смотрите эту ссылку: http://jqueryui.com/accordion/