为什么我的代码在最初隐藏目标元素时不起作用？

Question

这是我们被要求做的，下面的代码是我修改第二个任务后所做的。问题是它只有在我禁用强加于 item-body 的隐藏功能时才有效。但是练习说它最初应该被隐藏。你能给我一个关于如何使用隐藏的 item-body 获得相同效果的提示吗？

此任务说明了可以使用 jQuery 产生的滑动效果。使用 class my-item 创建一个 div，其中包含另外两个 div 标记，第一个带有 class item-header，第二个带有 class item-body。 item-header div 包含一个带有一些文本的 <h2> 标签（例如 Click Me）。 item-body div 也包含一些文本，但 div 最初是隐藏的。如果用户单击 <h2> 标题，div item-body 应该向下滑动并且其内容变为可见。再次单击标题后，div 应该会向上滑动并且其内容会变得不可见。
以这样一种方式扩展上一个任务的代码，即可以将带有 class my-item 的第一个 div 的深层副本附加到 body通过单击按钮打开文档。请务必修改上一个任务中的事件处理程序，以便它也适用于新元素。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>event 3</title>
    <script src="library/jquery.js"></script>
    <script>
     /*3.Extend your code from the previous task in such a way that a deep copy of the first div with the class my-item can be appended to the body of the document by clicking on a button. Be sure to modify your event handler from the previous task so that it also works for the new elements.*/
        $(document).ready(function() {
            $('#copy').click(function() {
                $('.my-item:last').clone().appendTo('body');
            });
            /*$('.item-body').hide();*/
            $(document).on('click', 'h2', function() {
                if ($(this).parent().next().children().is(':visible')) {
                    $(this).parent().next().children().slideUp();
                } else {
                    $(this).parent().next().children().slideDown();
                }
                /*$(this).parent().next().children().clone().appendTo('body').css({"color": "red", "border": "2px solid red"});// i first select the parent of my element then i select the next parent and its children (the paragraph inside item-body)*/
            });
        });
    </script>
</head>
<body>
    <div class='my-item'>
        <div class='item-header'>
            <h2>Jesus is the only Hope</h2>
        </div><!--closing tag for for div item-header-->

        <div class='item-body'>
            <p>je leve les yeux vers les monts que jaime dou peut me venir ici le secours. Le secours me vient de lEternel meme</p>
        </div><!--closing tag for the div item-body-->

    </div><!-- This is the closing tag of div my_item-->
    <button id='copy'>copy</button>
</body>
</html>

Answer 1

看起来你的测试 visible/traversal:

$(this).parent().next().children().is(':visible')

匹配第二个 p

但你没有隐藏 p，你隐藏了 div.item-body

最好的办法是更改下拉菜单以匹配 div 而不是 p:

$('.item-body').hide();
$(document).on('click', 'h2', function() {
    if ($(this).parent().next().is(':visible')) {
        $(this).parent().next().slideUp();
    } else {
        $(this).parent().next().slideDown();
    }
});

线索在题中：divitem-body应该往下滑

Answer 2

使用display: none，但是在右边的元素中，然后检查这个元素是否可见。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
 <html>
  <head>
  <title>event 3</title>
  <script src="library/jquery.js"></script>
  <script>
  /*3.Extend your code from the previous task in such a way that a deep copy of the first div with the class my-item can be appended to the body of the document by clicking on a button. Be sure to modify your event handler from the previous task so that it also works for the new elements.*/

  $(document).ready(function() {

         $('#copy').click(function(){

            $('.my-item:last').clone().appendTo('body');

            });
        

            /*$('.item-body').hide();*/

             $(document).on( 'click','h2', function() {



               if($(this).parent().next().is(':visible')){

             $(this).parent().next().slideUp();

             }

             else{ 

             $(this).parent().next().slideDown();

             }

                /*$(this).parent().next().children().clone().appendTo('body').css({"color": "red", "border": "2px solid red"});// i first select the parent of my element then i select the next parent and its children (the paragraph inside item-body)*/ 
            

                });






  });

  

  </script>
  </head>
   <body>
   <div class = 'my-item'>
    <div class = 'item-header'>
                 <h2>Jesus is the only Hope</h2>
    </div><!--closing tag for for div item-header-->

    <div class = 'item-body' style='display: none'>
                  <p>je leve les yeux vers les monts que jaime dou peut me venir ici le secours. Le secours me vient de lEternel meme</p>
    </div><!--closing tag for the div item-body-->

     </div><!-- This is the closing tag of div my_item-->
     <button id ='copy'>copy</button>
   </body>
 </html>

为什么我的代码在最初隐藏目标元素时不起作用？

Why is my code not working when the targeted element is initially hidden?

jquery

traversal