如何在“点击”索引中的“切换”功能中添加“ slideUp”效果？

Question

我正在电子商务网站（由BigCommerce托管）上的动态Model-> Submodel类别选择器上工作。 我设计了一个模板结构，以将页面与他们的“孩子”一起构建出来。 通过单击功能显示“模型”，以在其下方连续显示“子模型”。 我在脚本方面得到了朋友的帮助，以调整子模型的显示和组织方式。 我想添加一个切换功能，因此单击同一模型将切换/折叠子模型部分。

如果条件有效，则将切换功能添加到“ const”中，但是我无法通过它触发“ slideUp”效果。 我测试了：“ existingSubmodel.toggle（）。slideUp（400）;” 和“ existingSubmodel.slideUp（400，（）=> {existingSubmodel.toggle（）;}）;”。 都不适合我。

 $().ready(() => { // Any time a model is clicked, do the following. $(".model").click((e) => { const existingSubmodel = $('.sub-models.active'); if (existingSubmodel.get(0)) { //Finish any animations if there are some going on. existingSubmodel.stop(true, true); // Wait until the submodels have finshed sliding up and then remove. existingSubmodel.slideUp(400, () => { existingSubmodel.remove(); }); existingSubmodel.toggle(); } addSubmodels(e); }); }); /** * Find the index of the model * Then find the position in the row (ie what column is it?) * Then find the index to insert at - this will be at the end of a row so that the submodels container will start on a new line. * Create a clone of the submodel container and add an `.active` class to it. * Append that submodel clone to the `indexToInsert`. * Slide it down. */ function addSubmodels(e) { const parent = $(e.currentTarget); const parentId = parent.attr('id'); const index = getIndexOfElement(parent); const position = getPositionInFlex(parent); const indexToInsert = index + getNumberOfElements() - position; const elementToAppendTo = $(".model").get(indexToInsert); const subModel = $("#submodel-" + parentId).clone(true); subModel.addClass('active'); $(elementToAppendTo).after(subModel); $('.sub-models.active').slideDown(400); } function getIndexOfElement(element) { return $('.model').toArray().findIndex(e => { return e.id === element.attr('id'); }); } function getNumberOfElements() { return Math.floor($("#container").width() / $(".model").outerWidth(true)); } function getPositionInFlex(element) { const numEl = getNumberOfElements(); const index = getIndexOfElement(element) + 1; const position = index % numEl; return position === 0 ? numEl : position; } 

 #container { width: 800px; height: auto; display: flex; justify-content: space-between; flex-wrap: wrap; background-color: white; } .model { margin: 20px; cursor: pointer; } .model:hover { box-shadow: 2px 2px 10px #AAA; } .model-text { width: 200px; height: 100px; text-align: center; background-color: #AAA; font-size: 18px; } .sub-models { display: none; padding: 20px; background-color: pink; width: 100%; margin: 0 20px; } .sub-model-row { display: flex; flex-wrap: wrap; } .sub-model { width: 25%; height: auto; } .hide { opacity: .5; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1> Select From The Following Models </h1> <!-- Grandparent --> <div id="container"> <div id="1" class="model"> <div class="model-text"> Model 1 </div> </div> <div id="2" class="model"> <div class="model-text"> Model 2 </div> </div> <div id="3" class="model"> <div class="model-text"> Model 3 </div> </div> <div id="4" class="model"> <div class="model-text"> Model 4 </div> </div> <div id="5" class="model"> <div class="model-text"> Model 5 </div> </div> <div id="6" class="model"> <div class="model-text"> Model 6 </div> </div> <div id="submodel-1" class="sub-models"> <div class="sub-model-row"> <div class="sub-model"> Model 1 SubModel 1 </div> <div class="sub-model"> Model 1 SubModel 2 </div> <div class="sub-model"> Model 1 SubModel 3 </div> </div> </div> <div id="submodel-2" class="sub-models"> <div class="sub-model-row"> <div class="sub-model"> Model 2 SubModel 1 </div> <div class="sub-model"> Model 2 SubModel 2 </div> <div class="sub-model"> Model 2 SubModel 3 </div> </div> </div> <div id="submodel-3" class="sub-models"> <div class="sub-model-row"> <div class="sub-model"> Model 3 SubModel 1 </div> <div class="sub-model"> Model 3 SubModel 2 </div> <div class="sub-model"> Model 3 SubModel 3 </div> </div> </div> <div id="submodel-4" class="sub-models"> <div class="sub-model-row"> <div class="sub-model"> Model 1 SubModel 1 </div> <div class="sub-model"> Model 1 SubModel 2 </div> <div class="sub-model"> Model 1 SubModel 3 </div> </div> </div> <div id="submodel-5" class="sub-models"> <div class="sub-model-row"> <div class="sub-model"> Model 1 SubModel 1 </div> <div class="sub-model"> Model 1 SubModel 2 </div> <div class="sub-model"> Model 1 SubModel 3 </div> </div> </div> <div id="submodel-6" class="sub-models"> <div class="sub-model-row"> <div class="sub-model"> Model 1 SubModel 1 </div> <div class="sub-model"> Model 1 SubModel 2 </div> <div class="sub-model"> Model 1 SubModel 3 </div> </div> </div> </div> 

我只需要切换功能即可使slideUp效果动起来。 如果切换“子模型”部分也将触发向上滑动动画，那就太好了（如果您从JS第13行中删除“ existingSubmodel.toggle（）;”代码，也会这样做）。还在学习jQuery，而我的JS是如此。

您也可以在这里使用它： JSfiddle

Answer 1

更新

在摆弄小玩意儿之后，我可以看到您实际想要实现的目标。 slideUp确实是您想要的方法，但是您需要在dom树中指定正确的元素，因为您正在克隆该元素： existingSubmodel[0].slideUp(); 在这里，我们指定dom树中的第一个元素，因为您要追加克隆。

  // Any time a model is clicked, do the following.
  $(".model").click((e) => {
    const existingSubmodel = $('.sub-models.active');
    if (existingSubmodel.get(0)) {
        //Finish any animations if there are some going on. 
        existingSubmodel.stop(true,true);
        // Wait until the submodels have finshed sliding up and then remove. 
        existingSubmodel.slideUp(400, () => {
           existingSubmodel.remove(); 
        });
        existingSubmodel[0].slideUp(); 
    }
    addSubmodels(e);
  });

您的其余代码也很好。 我真正改变的只是第13行。

工作提琴： https : //jsfiddle.net/mcpdnyaz/1/#&togetherjs=1SSm3yLPeh

希望这可以帮助。

Answer 2

如果您的主要目标只是确保子模型在单击时所在的模型被单击时进行toggle() ，则可以删除此处存在的toggle()或slideToggle()函数。 相反，您可以在if (existingSubmodel.get(0))块之后执行以下操作：

// Add .activemodel class to each model-text that gets clicked. 
// If the model-text has the activemodel class already, just remove it and do nothing else. 
// Otherwise, add the new submodel in there, AND get rid of all .activemodel classes, 
// and just add a new .activemodel class on the the model that is now active.  


if ($(e.target).hasClass('activemodel')) {
    $(e.target).removeClass('activemodel');
} else {
    addSubmodels(e);
    $('.activemodel').removeClass('activemodel');
    $(e.target).addClass('activemodel');
}

我注意到，如果最后一行未满，这也将失败，这可能是您的朋友的一个小疏忽indexToInsert的计算就好像该行已满。 如果未满，那么elementToAppendTo实际上将不存在，因此您不能追加到它。 我认为，这里的一个不错的解决方案是将indexToInsert重置为$('.models')的最后一个索引， indexToInsert是它要比最后一个索引长。 可能看起来像这样：

// after setting const position
const models = $(".model");
let indexToInsert = index + getNumberOfElements() - position;
if (indexToInsert > models.length-1) { indexToInsert = models.length-1}

const elementToAppendTo = models.get(indexToInsert);