javascript - 选择嵌套在另一个 div 下方的 div

Question

我知道这是一件简单的事情，但无法理解我做错了什么。我有一个 h2 标签，它会在点击时运行一个函数，然后它会找到一个带有“homeSlide”类的 div，然后运行 ​​slideToggle 方法。但是，如果不使下面具有相同类名的两个 div 也滑动，我似乎无法让内容滑动。

这是我的 HTML：

<h2>Header</h2>

<div id="home_newproducts_list">
   <div class="category-products">
      <ul class="products-grid">
         <li>Hold fetured products so will be excluded from the slideToggle</li>
      </ul>
      <div class="homeSlide">
         <!-- Content that needs to be displayed on slide -->
      </div>
   </div>
</div>

查询：

 jQuery(document).ready(function(){
            jQuery("#home_newproducts_list ul.products-grid").not(":first").wrapAll('<div class="homeSlide">');         
            jQuery(".home-spot h2").click(function(){
               jQuery(this).next('.homeSlide').slideToggle(1000);

            });

          });

我希望我已经解释得足够详细了。

所以我想做的就是在 homeSlide div 上运行 slideToggle 方法，但只能在 h2 之后的下一个上运行。

Answer 1

jQuery(".home-spot h2")

假设您在<h2>Header</h2>这里选择元素

尝试使用next()and find()。

  jQuery(this).next().find('.homeSlide').slideToggle(1000);

next()获取紧随其后的兄弟姐妹，在您的情况下是 div#home_newproducts_list