Исключить элемент из jQuery анимации

Question

Я почти уверен, что на этот вопрос был дан ответ, но причина, по которой я задаю этот вопрос, заключается в том, что я не уверен, как реализовать ответы в моем коде, не нарушая его. У меня есть меню аккордеона, и он использует заголовки, теги абзацев, divs для структуры аккордеона. Ну, что я пытаюсь сделать, это использовать div внутри аккордеона для отображения изображений, но вот что: divs используются для структуры аккордеона.

Итак, что я прошу, так это, как иметь jQuery для этого div как чисто контент, а не часть структуры?

Я уверен, что ответ должен быть использован .not(), но не уверен. Я только понимаю основы, когда дело доходит до JavaScript и jQuery. Мне очень жаль этих парней ... Я тип человека, который учится, а не читает книгу.

var headers = ["H1", "H2", "H3", "H4", "H5", "H6"]; 
 

 
$(".accordion").click(function(e) { 
 
    var target = e.target, 
 
    name = target.nodeName.toUpperCase(); 
 

 
    if ($.inArray(name, headers) > -1) { 
 
    var subItem = $(target).next(); 
 

 
    //slideUp all elements (except target) at current depth or greater 
 
    var depth = $(subItem).parents().length; 
 
    var allAtDepth = $(".accordion p, .accordion div:not(.exclude)").filter(function() { 
 
     if ($(this).parents().length >= depth && this !== subItem.get(0)) { 
 
     return true; 
 
     } 
 
    }); 
 
    $(allAtDepth).slideUp("fast"); 
 

 
    //slideToggle target content and adjust bottom border if necessary 
 
    subItem.slideToggle("fast", function() { 
 
     $(".accordion :visible:last").css("border-radius", "0 0 10px 10px"); 
 
    }); 
 
    $(target).css({ 
 
     "border-bottom-right-radius": "0", 
 
     "border-bottom-left-radius": "0" 
 
    }); 
 
    } 
 
});

<aside class="accordion"> 

    <div class="opened-for-codepen"> 

    <h2>How do I recruit members?</h2> 

    <div class="exclude image_legend"> 

     <span>Image legend for "How do I recruit members?" section</span> 
     <br /> 
     <br /> 

     <img src="includes/images/clan/clan-tab.png" height="40px" style="display: inline;" /> 

     <img src="includes/images/clan/clan-bottom-bar.png" height="40px" style="display: inline\;" /> 

     <img src="includes/images/clan/clan-recruit.png" height="40px" style="display: inline-block;" /> 

     <img src="includes/images/clan/clan-tab.png" height="40px" style="display: inline-block;" /> 

    </div> 

    <p> 

     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis arcu augue. Donec varius semper interdum. Sed condimentum ipsum enim, a egestas nunc blandit a. Aenean varius dapibus suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Quisque et lectus sapien. Nulla dapibus porta libero ac efficitur. Phasellus condimentum ornare porta. Aliquam erat volutpat. Nullam nec orci vitae felis mattis suscipit consectetur sit amet urna. Nulla lobortis augue ac commodo condimentum. Maecenas 
     ac dui cursus, congue felis quis, varius elit. Curabitur nulla lacus, dignissim ut pellentesque at, posuere sit amet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nec sapien diam. Nulla 
     accumsan viverra tellus sed laoreet. In eleifend nulla libero, vehicula consectetur magna condimentum vitae. Suspendisse non rhoncus justo. Nullam eleifend elit nec neque efficitur, quis fermentum metus pretium. Quisque tellus mauris, molestie in 
     ultrices eu, tincidunt ut nibh. Fusce eu volutpat felis. Integer ligula nulla, mattis quis pulvinar pharetra, vehicula nec arcu. Vivamus tincidunt nulla a nisi vehicula lobortis. In hendrerit, neque quis convallis lacinia, nisl ipsum varius lorem, 
     nec laoreet nisi odio vitae est. Nulla vitae diam enim. Suspendisse a dignissim magna. Pellentesque convallis maximus mollis. Nullam tellus est, accumsan sit amet facilisis sit amet, semper sed lorem. Mauris laoreet tortor at odio aliquet, ut porta 
     lacus rhoncus. Nullam laoreet dolor et velit malesuada feugiat. Vestibulum a erat elementum, hendrerit massa non, ornare enim. Phasellus iaculis diam eros, sit amet dapibus elit finibus id. 

    </p> 

    </div> 

</aside> 

Edit: выше HTML консолидируется, потому что есть много контента, чтобы включить все это, но я предоставить вам базовую структуру, что делает гармони

Answer 1

Назначить класс вашему подразделению (пример «мой класс»)

Затем не используйте: not(), чтобы отфильтровать выбор

var headers = ["H1","H2","H3","H4","H5","H6"]; 

    $(".accordion").click(function(e) { 
     var target = e.target, 
      name = target.nodeName.toUpperCase(); 

     if($.inArray(name,headers) > -1) { 
     var subItem = $(target).next(); 

     //slideUp all elements (except target) at current depth or greater 
     var depth = $(subItem).parents().length; 
     var allAtDepth = $(".accordion p, .accordion div:not(.my-class)").filter(function() { 
      if($(this).parents().length >= depth && this !== subItem.get(0)) { 
      return true; 
      } 
     }); 
     $(allAtDepth).slideUp("fast"); 

     //slideToggle target content and adjust bottom border if necessary 
     subItem.slideToggle("fast",function() { 
      $(".accordion :visible:last").css("border-radius","0 0 10px 10px"); 
     }); 
     $(target).css({"border-bottom-right-radius":"0", "border-bottom-left-radius":"0"}); 
     } 
    });