摺疊/展開的手風琴菜單

我的工作手風琴風格標籤此頁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(); 
    } 
});

我將不勝感激什麼可能是錯誤的任何提示。謝謝！

更新：代碼工作正常時，它是內聯，但是當我把它放在外部腳本文件它不工作。

來源

2016-01-06 Parlanchina

你的隱藏和展示應該在CSS中通過媒體查詢來處理。您的懸停狀態（'cursor：pointer;'）也應該由CSS來處理 – Jason

控制檯顯示'Uncaught TypeError：$（...）。colorbox不是函數'。這會在'$（document）.ready'後面打斷你的代碼。 –

你能告訴你如何包含外部腳本文件嗎？ –

我不能評論，因爲我沒有足夠的聲譽，但我注意到你使用$（this）很多。只是一個提示，將對象存儲在變量中一次，然後使用它來清理和更高效。每次使用$（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"); 
    } 
});

來源

2016-01-06 21:00:02 Zinc

爲什麼停止使用'$（this）'？緩存'$（this）.parent（）'，這將優化代碼甚至更多。甚至是'$ this.parent（）。find（「。LuauPackCont」）'，這被稱爲三次。 –

好點傑里米我更新了代碼。 – Zinc

您應該將'$ this'重命名爲'$ parent'，因爲它不再是'this'，而是它的父母...獲取複雜的HMM？:) –

我想你可能想改變你的<script>標籤的順序。如果在加載之前有jQuery或jQuery-UI的引用，則會出現錯誤。嘗試訂購<script>標籤，像這樣：

jQuery的
jQuery的UI
你的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>

它看起來就像在js文件後面加載jQuery和jQuery-UI文件一樣。

在Chrome中devtools，我看到您的網站顯示這個錯誤（如傑里米指出）：

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

您可能會運行到同樣的問題，因爲這個帖子：

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

來源

2016-01-06 22:05:32

謝謝Tony！非常好的一點！ – Parlanchina

摺疊/展開的手風琴菜單

回答

相關問題