0 

'use strict';

const Template = require('dw/util/Template');
const HashMap = require('dw/util/HashMap');
const PageRenderHelper = require('*/cartridge/experience/utilities/PageRenderHelper');
const UUIDUtils = require('dw/util/UUIDUtils');

/**
 * Render logic for the Accordion component
 * @param {dw.experience.ComponentScriptContext} context The Component script context object.
 *
 * @returns {string} the markup to be displayed
 */

module.exports.render = function (context) {
    let model = new HashMap();
    let content = context.content;

    model.accordionItemID = 'acc' + UUIDUtils.createUUID();
    model.accordionItemHeader = content.accordionItemHeader;

    model.regions = PageRenderHelper.getRegionModelRegistry(context.component);

    return new Template('experience/components/nexumShop_components/accordionItems').render(model).text;
};

'use strict';

const Template = require('dw/util/Template');
const HashMap = require('dw/util/HashMap');
const PageRenderHelper = require('*/cartridge/experience/utilities/PageRenderHelper.js');

/**
 * Accordion Parent JavaScript
 * Render logic for the Accordion component
 * @param {dw.experience.ComponentScriptContext} context The Component script context object.
 *
 * @returns {string} the markup to be displayed
 */

module.exports.render = function (context) {
    let model = new HashMap();

    model.accordionParentID = context.component.getID();
    model.regions = PageRenderHelper.getRegionModelRegistry(context.component);
    return new Template('experience/components/nexumShop_components/accordionParent').render(model).text;
};

'use strict';

$(document).on('click', function (event) {
    event.stopPropagation();
    // loop through all accordion parent elements
    $('.nx-acc').each(function (index, accordion) {
        var accordionParent = $(accordion);
        // get id of the parent element
        var accordionParentID = accordionParent.attr('id');
        // find all accordion item elements belonging to the parent element
        var children = accordionParent.find('.nx-acc');
        // loop through all accordion item elements
        children.each(function (accordionItem) {
            var accordionItemId = $(accordionItem).attr('id');
            // add data-parent attribute to the accordion item element
            $(`#${accordionItemId}`).attr('data-parent', `#${accordionParentID}`);
        });
    });
});
<isscript>
    var assets = require('*/cartridge/scripts/assets.js');
        assets.addJs('/js/experience/components/accordion.js');
</isscript>
<iscomment> This is the Parent ISML in a different folder </iscomment>
<div class="accordion .nx-acc mb-4" id="${pdict.accordionParentID}">
    <isprint value="${pdict.regions.accordionParent.setComponentClassName('card accordion-item-card').render()}"
        encoding="off" />
</div>

<iscomment> This is the Child ISML in a different folder </iscomment>

<div class="card-header nx-acc" id="${'header-' + pdict.accordionItemID}">
    <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="${'#' + pdict.accordionItemID}"
     aria-expanded="true" aria-controls="${pdict.accordionItemID}">
 <isprint value="${pdict.accordionItemHeader}" encoding="off" />
        </button>
    </h2>
</div>

<div id="${pdict.accordionItemID}" class="collapse" aria-labelledby="${'header-' + pdict.accordionItemID}">
    <div class=" card-body">
        <isprint value="${pdict.regions.accordionContent.render()}" encoding="off" />
    </div>
</div>

**我想将父 ID 附加到子 ID，以便每次单击要打开的项目时，它会在您打开下一个时自动关闭。也就是说，我想创建一个

  • 手风琴具有手风琴项目的内容区域
  • Accordion 项目具有内容的内容区域
  • 手风琴项目有一个标题

手风琴示例**

4

0 回答 0