Tronquer les listes avec Jquery

Question

Comment ajouter une fonction pour cacher/afficher des éléments dans la liste ?

Par exemple, nous avons plusieurs listes. Lorsque nous cliquons sur le lien "show", tous les éléments de la liste sont affichés, lorsque nous cliquons sur le lien "hide", les éléments d'une liste dont l'index est supérieur à 3 sont masqués.

<div class="filter_item">
...
<h3>Network Name:</h3>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
...
</div>

et le code js

<script type="text/javascript">
    //<![CDATA[
        jQuery(document).ready(function($){
            $('.filter_item ul').each(function(){
                $('li:gt(2)', this).hide();
                if ($(this, 'li').children().length > 3) {
                    $(this, ':last').append('<li><a href="javascript:void(0);" class="tr_more">More...</a></li>');
                }
            });
            $('.tr_more').toggle(function(){
                $(this).closest('li').siblings().show();
                $(this).attr('class', 'tr_less').text("Less...");
            }, function(){
                ????
            });
        });
    //]]>
</script>

Comment masquer les éléments lorsque l'on clique sur le lien "cacher" ?

Answer 1

Bien que cela semble excessivement complexe, cela fonctionnera pour vous :

$(this).closest('ul').children('li:gt(2):not(:last)').hide();

Il recherche d'abord le parent <ul> puis cache l'enfant <li> mais laisse le parent du lien "Afficher/Masquer".

Aller avec $(this).closest('li').prevAll().slice(2).hide(); n'a pas fonctionné correctement - il a caché les premiers nœuds, mais pas les derniers. prevAll semblent renvoyer les éléments dans l'ordre inverse.

Answer 2

Au lieu d'afficher et de masquer chaque élément individuellement, vous pouvez ajouter une classe à l'élément li après les trois premiers, puis utiliser CSS pour les afficher et les masquer en ajoutant une classe à l'élément ul parent :

Javascript :

$(function(){

  $('.filter_item ul')
  .addClass('hidemore')
  .each(function(){ $(this).find('li:gt(2)').addClass('more'); })
  .append($('<li/>').append($('<a/>').attr('href','javascript:void(0)').text('more...')))
  .find('a').toggle(function(){
    $(this).text('less...').closest('ul').removeClass('hidemore');
  },function(){
    $(this).text('more...').closest('ul').addClass('hidemore');
  });

});

CSS :

.filter_item ul.hidemore li.more { display: none; }

Notes :
L'attribut href avec javascript:void(0) est ajouté aux liens pour qu'ils apparaissent comme tels, mais ne navigue nulle part. De cette façon, le gestionnaire de clics n'a pas besoin d'arrêter l'événement.

En .find('a') après l'ajout des éléments parce que l'ajout des gestionnaires d'événements de clic aux éléments ne fonctionne qu'une fois qu'ils ont été ajoutés à la page. (Si le texte des listes contient également des liens, vous devrez ajouter une classe aux liens ajoutés, afin qu'ils puissent être ciblés spécifiquement à ce stade).

Answer 3

Le code final ressemble à ceci

jQuery(document).ready(function($){
    $('.filter_item ul').each(function(){
        $('li:gt(2)', this).hide();
        if ($(this, 'li').children().length > 3) {
            $(this, ':last').append('<li><a href="javascript:void(0);" class="tr_more">More...</a></li>');
        }
    });
    $('.tr_more').toggle(function(){
        $(this).closest('li').siblings().show();
        $(this).attr('class', 'tr_less').text("Less...");
    }, function(){
        $(this).closest('ul').children('li:gt(2):not(:last)').hide();
        var curr_ul_y_pos = $(this).closest('ul').prev().offset().top;
        $('html:not(:animated), body:not(:animated)').animate({
            scrollTop: curr_ul_y_pos-5
        }, 'normal');
        $(this).attr('class', 'tr_more').text("More...");
    });
});

Ajout d'attributs oubliés après un événement de masquage. Et la page défile maintenant à la position de l'élément h3.

Answer 4

$('.hidelink').click(function(){
     $(this).children('li').hide();
});

Cela permettra

Answer 5

Vous pouvez également utiliser .toggle() comme,

$(this).closest('ul').children('li:gt(2)').toggle();

Pouvez-vous essayer ceci ?

merci.