Question

我正在研究由Wordpress和Woocommerce提供支持的客户端网页设计和开发，但我被迫使用插件然后修改它以适应所提议的设计和功能。

该插件是'Woocommerce Visual Products Configurator'：

http://demos.orionorigin.com/wpb/customize-your-product/?configurator_id=541c0f7ca24a3&product_id=120

它允许买家通过从项目的不同部分的一系列不同属性中进行选择来构建他们自己的项目。例如，为鞋子选择不同类型的鞋底，以及能够为同一鞋子选择一系列鞋带。

我已经成功地在这里集成并修改了插件：

[LINK REMOVED-VIEW LINK ABOVE，INSTEAD]

好吧......还不太符合我的喜好。

我的问题是当用户选择“警察”之类的属性组时，该属性组的选项（或属性）会在点击时向下滑动，并在点击时向上滑动。当您单击相应的属性组图标（警察或鞋底）时，此动画也会应用于所有其他属性组onclick ....属性或自定义选项向上或向下滑动。

由于是这种情况，单击打开的每个属性组的选项保持打开状态，直到再次单击相应的组图标以关闭...含义，除非您单击属性组图标以隐藏其选项，否则它将重叠以及其他属性组的选项，这些属性组也是打开的，直到点击时隐藏。

是否有解决此问题的方法，以便当用户点击属性组时，之前点击的选项的选项会隐藏或重新滑动？

我试着自己解决这个问题，但我没有经历过js（这种情况看起来像是由它驱动的）。

我想我找到了这个特定动作的脚本，点击上下滑动：

    select_initial_layer();
$(document)
.on("click",".layer_set_wrap h3",function(){
    var $that=$(this);
    if($that.hasClass('is-open')){
        $that.parent().find('.layer_icon_wrap').slideUp().show();
        $that.removeClass('is-open');
    }else{
        $that.parent().find('.layer_icon_wrap').slideDown().show();
        $that.addClass('is-open');
    }
})

有关如何修改此内容以便在点击其他属性组（ .layer_icon_name ）时将其修改为隐藏或隐藏的任何想法？

谢谢！

Answer 1

试试这个

function hide_layer($layer) {
    $layer.parent().find('.layer_icon_wrap').slideUp();
    $layer.removeClass('is-open');
}

select_initial_layer();
$(document).on("click", ".layer_set_wrap h3", function () {
    var $that = $(this);
    var $others = $('.layer_set_wrap h3').not($that);
    hide_layer($others);
    if ($that.hasClass('is-open')) {
        hide_layer($that);
    } else {
        $that.parent().find('.layer_icon_wrap').slideDown();
        $that.addClass('is-open');
    }
})

它基本上会找到所有其他图层，并在每次点击某些内容时对它们应用相同的隐藏功能。

我希望div类在其他类出现时消失，点击（js powered）

1 个答案: