javascript - 我希望 div 类在其他类出现时消失，点击(js 供电)

Question

我正在为客户设计和开发由 Wordpress 和 Woocommerce 提供支持的网页，但我被迫使用插件，然后对其进行修改以适应建议的设计和功能。

插件是“Woocommerce Visual Products Configurator”:

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

它允许买家通过为商品的不同部分选择一系列不同的属性来构建自己的商品。例如，为一只鞋选择不同类型的鞋底，以及能够为同一只鞋选择一系列鞋带。

我已经根据自己的喜好成功集成并修改了插件:

[链接已删除 - 查看上面的链接，取而代之]

嗯……我还不太喜欢。

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

既然如此，点击打开的每个属性组的选项都会保持打开状态，直到再次点击相应的组图标关闭...意思是，除非你点击一个属性组图标隐藏它的选项，否则它会重叠以及其他属性组的选项也是打开的，直到在点击时隐藏。

有没有办法解决这个问题，以便当用户单击属性组时，先前单击打开的选项的选项隐藏或滑回？

我尝试自己解决这个问题，但我没有使用 js 的经验(情况看起来是由它提供支持的)。

我想我找到了这个在点击时向上或向下滑动的特定 Action 的脚本:

    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');
    }
})

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