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>

jQuerycode：

               $(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正在寻找兄弟姐妹。使用div，.myul与图像不在同一级别，因此您的代码失败。

有关更新代码，请尝试：

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

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

使用div的jQuery无效

1 个答案: