C'est ce qu'on nous a demandé de faire et le code qui suit est ce que j'ai fait après avoir modifié la deuxième tâche. le problème est que cela ne fonctionne que lorsque je désactive la fonction de masquage imposée sur le corps de l'élément. Mais l'exercice dit qu'il devrait être caché au départ. Pourriez-vous s'il vous plaît me donner un indice sur la façon d'obtenir le même effet avec l'élément corps caché?

  1. Cette tâche illustre les effets de glissement qui peuvent être produits avec jQuery. Créez un div avec la classe my-item qui contient deux autres balises div, la première avec l'en-tête d'élément de classe et la seconde avec le corps d'élément de classe. Le div d'en-tête d'élément contient une balise <h2> avec du texte (par exemple, Click Me). Le div élément-corps contient également du texte, mais le div est initialement masqué. Si l'utilisateur clique sur le titre <h2>, le corps de l'élément div doit glisser vers le bas et son contenu devient visible. Après un autre clic sur le titre, le div doit glisser vers le haut et son contenu devient invisible.
  2. Étendez votre code de la tâche précédente de manière à ce qu'une copie complète du premier div avec la classe my-item puisse être ajoutée au corps du document en cliquant sur un bouton. Veillez à modifier votre gestionnaire d'événements à partir de la tâche précédente afin qu'il fonctionne également pour les nouveaux éléments.
<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>
0
mimireine 4 janv. 2016 à 19:06

2 réponses

Meilleure réponse

Ressemble à votre test de visibilité / traversée:

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

Correspond au 2e p

Mais vous ne cachez pas le p, vous cachez le div.item-body

Le mieux est de changer le curseur pour qu'il corresponde à div plutôt qu'à p:

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

L'indice est dans la question: le corps de l'élément div devrait glisser vers le bas

0
freedomn-m 4 janv. 2016 à 16:25

Utilisez display: none, mais dans l'élément de droite, puis vérifiez si cet élément est visible.

<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>
0
Jefrey Sobreira Santos 4 janv. 2016 à 16:37