javascript - jQuery 与 div 不工作

Question

我必须在 jQuery 中创建一个可展开/可折叠面板，并面临一些问题。 代码 HTML

           <div>
              <img src="8A7FA0A1FFEC5443785B9B29AF7629.jpg" alt="" />
                <div>
                  <span>
                    Hello
                </span>
               <ul class="myul">
                  <li>one</li>
              <li>Two</li>
                  </ul>
               </div>
              <img src="8A7FA0A1FFEC5443785B9B29AF7629.jpg" alt="" />
                <div>
                  <span>
                   r u there
               </span>
              <ul class="myul">
                <li>three</li>
                    <li>four</li>
                    </ul>
                 </div>
                 </div>

jQuery代码:

               $(document).ready(function() {

                $(".myul").hide();

                  $("img").click(function() {
                     $(this).next(".myul").slideToggle(600);
                     });
                   });

当我删除内部div标签时

                     <div>
                  <span>
                    Hello
                     </span>

它工作正常，但是使用内部 div 时它不起作用。有人可以帮忙吗？ 谢谢。 编辑: 如果代码是这样的:

        <li class="first">
      <span>

        <img src="8A7FA0A1FFEC5443785B9B29AF7629.jpg" width="15" height="15" alt="arrow" />
      </span>
      <div class="mydiv">
        <h3>
          ...
        </h3>
        <span>.... </span>
          <span>.... </span>


        <ul class="myul">
           .......

然后我尝试了你的代码..但它不起作用。我错过了一些东西。

Answer 1

$(this).next("div").find(".myul").slideToggle(600);

next 正在寻找 sibling 。对于 div，.myul 与图像不在同一级别，因此您的代码失败。

对于更新代码，请尝试:

$(this).parent().next("div").find(".myul").slideToggle(600);

图像位于跨度内，因此显然 div 不在图像旁边。