Magento2 如何在手机上使用不同行为的magento x-magento-init手风琴？

我正在尝试初始化magento手风琴，我希望它在移动设备上的表现不同于在桌面上

在我的情况下，我不能在phtml中使用

和javascript，例如：

<script>
if ($(window).width() <= 480) {
  $('#narrow-by-list').accordion(); // init with mobile params
} else {
  $('#narrow-by-list').accordion(); // init with desktop params
}
</script>

这种初始化方法的问题是，我无法设置检测移动分辨率所需的条件并设置不同的手风琴参数

---

我想做的是在移动设备上设置

active

as

false

和

multipleCollapsible

as

false

，这样在桌面上，手风琴总是打开的，允许打开多个项目，在移动设备上，手风琴默认关闭，一次只允许打开一个项目。

我在一段时间后做了什么大量测试正在定制magento手风琴组件，如下所示：

我打开了位于

lib\web\mage\accordion.js的文件，并对其进行了如下自定义：

define([
    'jquery',
    'mage/tabs'
], function ($, tabs) {
    'use strict';

    $.widget('mage.accordion', tabs, {
        options: {
            active: [0],
            activeMobile: [0], // added new option for mobile
            multipleCollapsible: false,
            multipleCollapsibleMobile: false,  // added new option for mobile
            mobileResolution: 480,  // added new option for mobile
            openOnFocus: false
        },
        
        // overriden the _create method from parent class and added
        // a way to check window resolution and make it use the mobile options
        _create: function () {
          
            if ($(window).width() <= this.options.mobileResolution) {
              console.log('accordion mobileResolution');
              this.options.active=this.options.activeMobile;
              this.options.multipleCollapsible=this.options.multipleCollapsibleMobile;
            }
          
            if (typeof this.options.disabled === 'string') {
                this.options.disabled = this.options.disabled.split(' ').map(function (item) {
                    return parseInt(item, 10);
                });
            }
            this._processPanels();
            this._handleDeepLinking();
            this._processTabIndex();
            this._closeOthers();
            this._bind();
        },
...

<script type="text/x-magento-init">
    {
        "#narrow-by-list": {
            "accordion": {
                "openedState": "active",
                "collapsible": true,
                "active": <?php echo $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($activeArray); ?>,
                "multipleCollapsible": true,
            }
        }
    }
</script>
<script>
    require(['jquery', 'domReady', 'accordion'], function($, domReady){
        domReady(function(){
            $('#narrow-by-list').accordion({multipleCollapsible: !!yourIsMobileCheck()});
        });
    })
</script>

然后清除静态文件缓存并重新加载页面

使用此解决方案，我可以得到所需的确切行为。
您可以这样做：

define([
    'jquery',
    'mage/tabs'
], function ($, tabs) {
    'use strict';

    $.widget('mage.accordion', tabs, {
        options: {
            active: [0],
            activeMobile: [0], // added new option for mobile
            multipleCollapsible: false,
            multipleCollapsibleMobile: false,  // added new option for mobile
            mobileResolution: 480,  // added new option for mobile
            openOnFocus: false
        },
        
        // overriden the _create method from parent class and added
        // a way to check window resolution and make it use the mobile options
        _create: function () {
          
            if ($(window).width() <= this.options.mobileResolution) {
              console.log('accordion mobileResolution');
              this.options.active=this.options.activeMobile;
              this.options.multipleCollapsible=this.options.multipleCollapsibleMobile;
            }
          
            if (typeof this.options.disabled === 'string') {
                this.options.disabled = this.options.disabled.split(' ').map(function (item) {
                    return parseInt(item, 10);
                });
            }
            this._processPanels();
            this._handleDeepLinking();
            this._processTabIndex();
            this._closeOthers();
            this._bind();
        },
...

<script type="text/x-magento-init">
    {
        "#narrow-by-list": {
            "accordion": {
                "openedState": "active",
                "collapsible": true,
                "active": <?php echo $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($activeArray); ?>,
                "multipleCollapsible": true,
            }
        }
    }
</script>
<script>
    require(['jquery', 'domReady', 'accordion'], function($, domReady){
        domReady(function(){
            $('#narrow-by-list').accordion({multipleCollapsible: !!yourIsMobileCheck()});
        });
    })
</script>


{
“#按列表缩小”：{
“手风琴”：{
“开放状态”：“活动状态”，
“可折叠”：正确，
“主动”：，
“多重可收回”：正确，
}
}
}
require（['jquery'，'domReady'，'accordion'，]，function（$，domReady）{
domReady（函数（）{
$（“#按列表缩小”）.accordion（{multipleCollapsible:！！yourIsMobileCheck（）}）；
});
})
谢谢，但由于某些原因，它在使用Chrome桌面和responsive进行测试时都能正常工作，但在实际手机上进行测试时，它最终会在某些情况下损坏手风琴。如果您愿意尝试，我刚刚为您更改了答案。