Question

这就是我们被要求做的事情，接下来的代码是我在修改第二个任务后所做的。问题是它只有在我禁用强加在item-body上的hide函数时才有效。但是练习说最初应该隐藏起来。你能不能给我一个关于如何在项目体隐藏的情况下获得同样效果的提示？

此任务说明了可以使用jQuery生成的滑动效果。使用包含两个其他div标签的类my-item创建一个div，第一个包含class item-header，第二个包含class item-body。 item-header div包含带有一些文本的<h2>标记（例如Click Me）。 item-body div也包含一些文本，但div最初是隐藏的。如果用户点击<h2>标题，则div项目正文应向下滑动，其内容将变为可见。再次点击标题后，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>

Answer 1

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

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

匹配第二个p

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

最好的办法是更改slidingown以匹配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应该向下滑动

Answer 2

使用display: none，但在右侧元素中，请检查此元素是否可见。

＆＃13;

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

＆＃13;

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

2 个答案: