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

【问题标题】：Why is my code not working when the targeted element is initially hidden?为什么最初隐藏目标元素时我的代码不起作用？
【发布时间】：2016-01-04 16:06:19
【问题描述】：

这是我们被要求做的，下面的代码是我在修改第二个任务后所做的。问题是它仅在我禁用对项目主体施加的隐藏功能时才有效。但练习表明它最初应该被隐藏。能否请您指点一下如何在隐藏物品主体的情况下获得相同的效果？

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

<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>

【问题讨论】：

标签： jquery traversal

【解决方案1】：

看起来你的可见/遍历测试：

$(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();
    }
});

线索在问题中：div item-body 应该向下滑动

【讨论】：

非常感谢您的帮助。我花了几个小时思考它，但我无法弄清楚哪里出了问题。
很抱歉，我没有接受您的回答，我今天才学会如何去做。百万次感谢您的帮助。

【解决方案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>

【讨论】：

很抱歉，我没有接受您的回答，我今天才学会如何去做。百万次感谢您的帮助。