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

你可以尝试：

 $(".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 2

看起来你正在做类似于手风琴或可折叠面板的事情。看看这个......

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

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

Answer 3

您的header-image-open是输入标头的子节点，因此请使用.find（）来获取它。 .next（）获取input-header的兄弟。

Answer 4

你有错误，你应该使用“find”（搜索“child”）而不是“next”。（因为搜索元素在“this”元素中）

JQuery - 如何选择特定的DIV

4 个答案: