JQuery - Как выбрать конкретный DIV

Question

Хорошо, я просто пытаюсь переключить этот DIV. Есть много других, которые следуют этой структуре HTML. Контейнер ввода и расширение ввода работают, так как они переключаются соответствующим образом.

Как я могу просто переключить внутренние div.header-image-open и div.header-image-close? Я ценю любого, кто может помочь!

 $(".input-header").click(function()
      {     
        $(this).next(".header-image-open").toggle();
        $(this).next(".header-image-close").toggle();
        $(this).next(".input-container").slideToggle(600);
        $(this).next(".input-container").next(".input-expand").slideToggle(600);

      });

<div class="input-header">
    <div class="header-text"><h2 class="arial">Carat</h2></div>
    <div class="header-image-open"><img src="/images/icons/expand-open.gif" /></div>
    <div class="header-image-close"><img src="/images/icons/expand-close.gif" /></div>
</div> 
<div class="input-container" style="height: 70px;">
   Content
</div>
<div class="input-expand">
    <p>Click to expand the color filter</p>
</div>

Answer 1

Похоже, вы делаете что-то похожее на гармошку или складную панель. Посмотрите на это ...

http://jqueryui.com/demos/accordion/

$(function() {
    $("#accordion").accordion();
});

Answer 2

Вы можете попробовать:

 $(".input-header").click(function()
  {     
    $(this).find(".header-image-open,.header-image-close").toggle();
    $(this).next(".input-container").slideToggle(600);
    $(this).next(".input-container").next(".input-expand").slideToggle(600);
  });

Answer 3

У вас есть ошибки, вы должны использовать «найти» (поиск «ребенок»), а не «следующий». (потому что поиск элементов находится в элементе "this")

Answer 4

Ваш header-image-open является дочерним для input-header, поэтому используйте .find (), чтобы получить его. .next () получает родственные элементы input-header.