свернуть/развернуть меню аккордеона

Question

Я работаю на вкладке аккордеон стиля на этой странице https://www.hawaiidiscount.com/oahu/luaus/germaines.htm

Когда я проверить это в автономном режиме он работает, но не на DNN. Посмотрите, где написано видео. Это должно привести к краху вкладки, когда вы нажмете на нее. И когда вы видите его с помощью небольшого устройства, он по умолчанию рушится и он должен расширяться при нажатии на него. Мой JS код:

// Includes Everything 
$(document).ready(function() { 
    // level 1 

    $(".arrow-right").hide(); 

    $(".LuauPackages").on("mouseover", function() { 
     // Mouse Pointer 
     $(".LuauPackages").css({ cursor: "pointer" }); 

    }); 


    $(".LuauPackages").on("click", function() { 
     if($(this).parent().find(".LuauPackCont").is(":visible")) { 
      $(this).parent().find(".LuauPackCont").slideUp("fast"); 
      $(this).parent().find(".arrow").removeClass("arrow-down").addClass("arrow-right"); 
      } else { 
      $(this).parent().find(".LuauPackCont").slideDown("fast"); 
      $(this).parent().find(".arrow").removeClass("arrow-right").addClass("arrow-down"); 
     } 
    }); 


    // this is if window is greater than or equal to 736px 
    if($(window).width() <= 736) { 
     $(".LuauPackCont").hide(); 
     $(".arrow-right").show(); 
     $(".arrow-down").hide(); 
    } 
}); 

Я был бы признателен за любые советы, что может быть не так. Спасибо!

UPDATE: код отлично работает, когда он встроен, но когда я помещаю его во внешний файл сценариев, он не работает.

Answer 1

Я не могу комментировать, поскольку у меня недостаточно репутации, но я заметил, что вы используете $ (это) много. Просто подсказка, чище и эффективнее хранить объект в переменной один раз, а затем использовать это вместо этого. Каждый раз, когда вы используете $ (this), это функция для создания нового объекта JQuery. Я изменил часть вашего кода ниже, чтобы отразить это. Надеюсь, это поможет.

$(".LuauPackages").on("click", function() { 
    var $this = $(this).parent(); // Caches JQuery object 

    if($this.find(".LuauPackCont").is(":visible")) { 
      $this.find(".LuauPackCont").slideUp("fast"); 
      $this.find(".arrow").removeClass("arrow-down").addClass("arrow-right"); 
     } else { 
      $this.find(".LuauPackCont").slideDown("fast"); 
      $this.find(".arrow").removeClass("arrow-right").addClass("arrow-down"); 
    } 
}); 

Answer 2

Возможно, вы захотите изменить порядок своих тегов <script>. Если перед загрузкой есть ссылки на jQuery или jQuery-UI, вы получите сообщение об ошибке. Попробуйте упорядочение <script> тегов так:

1. JQuery
2. JQuery-UI
3. Вы JavaScript файлов

Вот что я вижу на вашем сайте:

<script src="/Portals/0/Skins/HD-custom-design-s/Nav/jquery.min.js"></script> 
<script src="/Portals/0/Skins/HD-custom-design-s/Nav/mobile-menu.js"></script> 
<script src="/Portals/0/Skins/HD-custom-design-s/js/contentslider.js"></script> 
<script src="/Portals/0/Skins/HD-custom-design-s/js/jquery.colorbox.js"></script> 
<script src="/Portals/0/Skins/HD-custom-design-s/js/jquery-1.11.3.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 

Он выглядит например, файлы jQuery и jQuery-UI загружаются после ваших JS-файлов.

В Devtools Chrome, я вижу ваш сайт показывает эту ошибку (как Джереми указал):

Uncaught TypeError: $(...).colorbox is not a function

Вы могли бы работать в том же вопросе, как этот пост:

JQuery and Colorbox loaded but "colorbox is not a function"