我在選擇所有類accordion并將它們帶入 knckoutjs 以使用它們時遇到問題。
點擊此鏈接：https : //wpbeaches.com/create-expandcollapse-faq-accordion-collapse-click/
我設法創建了漂亮的可擴展物件（矩形），但它們“死了”，因為我使用的是 Knockotjs，而不是 JS。所以我的問題是如何讓它發揮作用？第一步是accordion由于某種原因我無法選擇所有類..這是我的代碼：
define(['viewmodels/shell', 'durandal/services/logger', 'mediator-js', 'knockout', 'toastr'],
function (shell, logger, mediator, ko, toastr) {
var vm = {
shell: shell,
activate: activate,
mediator: mediator
}
function activate() {
var acc = jQuery.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i ) {
acc[i].onclick = function () {
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses) {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
}
function setClass(els, className, fnName) {
for (var i = 0; i < els.length; i ) {
els[i].classList[fnName](className);
}
}
return true;
}
return vm;
});
我實際上嘗試的是將上面鏈接中的 js 部分復制到我的解決方案中并使其作業（展開每個矩形..）
uj5u.com熱心網友回復：
我不太清楚您要做什么，但是代碼中的告示標志表明您正在嘗試做錯誤的事情。
這是我能想到的使用 Knockout 和（為方便起見）jQuery 的最小手風琴型別的功能，直接從您提供的示例頁面中獲取問題和答案。
你總是可以通過添加影片和諸如此類的東西變得更加復雜。但最終，它是關于跨元素串列管理單個 CSS 類。
ko.bindingHandlers.cssExclusive = {
init: (element, valueAccessor) => {
ko.applyBindingsToNode(element, {
click: () => {
var config = ko.unwrap(valueAccessor());
$(element).closest(config.within).children().not(element).removeClass(config.class);
$(element).toggleClass(config.class);
}
});
}
};
const data = {
sections: [
{name: "FAQs", items: [
{q: "What currency is the course charged in?", a: "The course is charged in Australian dollars."},
{q: "What if the course doesn’t help me?", a: "If it doesn't help you I'll refund the purchase price in full."},
{q: "When will the webinars take place?", a: "Depending on the mix of countries and time zones for people attending the webinars, I will pick a time that works best for most participants. All webinars will be recorded so you can listen to them again. The private Facebook group will obviously be available 24/7 and I’ll be monitoring and contributing to the discussion regularly."},
{q: "What is the self-directed mentoring program?", a: "The self-directed mentoring program is designed to help you set-up and run an effective mentee-mentor relationship as part of the course."},
]}
]
};
ko.applyBindings(data);.accordion {
cursor: pointer;
}
.panel {
display: none;
}
.accordion.active {
color: blue;
}
.accordion.active .panel {
display: block;
color: green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach: sections">
<h3 data-bind="text: name"></h3>
<div data-bind="foreach: items">
<p class="accordion" data-bind="cssExclusive: {class: 'active', within: 'div'}">
<span data-bind="text: 'Q' ($index() 1) '.'"></span>
<span data-bind="text: q"></span>
</p>
<div class="panel">A. <span data-bind="text: a"></span></div>
</div>
</div>我不能說您將如何將其集成到您的示例代碼中，但也許您可以從中汲取一些靈感。
核心功能是在單擊時在元素上切換 CSS 類。為此，我制作了一個簡單的自定義系結，將點擊系結應用于所有問題。單擊系結負責active在單擊的問題上切換類，并將其從同一容器中的所有其他問題中洗掉。
這甚至不需要視圖模型上的“擴展”可觀察物件之類的東西，因為它純粹通過 DOM 中的 CSS 類來保持其狀態。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/370643.html
標籤：javascript html 推特引导 淘汰赛.js