0
votes

Comment afficher et masquer un ul si je visite le lien inclus dans les enfants

J'ai une liste ul . Si je visite http://exampel.com/1 , alors .children doit être affiché. Si ce n'est pas le cas, les .children doivent être masqués.

De même si je suis à l'intérieur de http://exampel.com/2 et que le parent a des enfants de classe, donc la classe .children sera affichée.

J'ai atteint le premier objectif en cachant le .children via CSS, puis en utilisant ce code pour l'afficher , mais que me manque-t-il pour atteindre le deuxième objectif?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="page_item page_item_has_children current_page_item">
    <a href="http://exampel.com/1" aria-current="page">Jobba hos oss</a>
    <ul class="children" style="display: block;">
      <li class="page_item ">
        <a href="http://exampel.com/2">Anna-Lena jobbar hos oss</a>
      </li>
      <li class="page_item ">
        <a href="http://exampel.com/3">LuÃs jobbar hos oss</a>
      </li>
    </ul>
  </li>
  <li class="page_item ">
    <a href="http://exampel.com/4">Lediga jobb</a>
  </li>
  <li class="page_item">
    <a href="http://exampel.com/5">Cookie policy</a>
  </li>
  <li class="page_item">
    <a href="http://exampel.com/6">FÃ¶r medarbetare</a>
  </li>
  <li class="page_item">
    <a href="http://exampel.com/7">Information</a>
  </li>
</ul>

if ($('li').hasClass('current_page_item', 'page_item_has_children')) {
  $('.current_page_item .children').show();
}

javascript jquery

0 commentaires

4 Réponses :

0
votes

En supposant que vous ayez le contrôle sur le html pour pouvoir définir current_page_item , vous pouvez alors attribuer à tous les éléments qui devraient afficher ensemble un attribut de données unique, définir initialement tout sur masqué, et sur $ (document) .ready () show basé sur la valeur de l'attribut.

<style>
.page_item{display:none}
</style>

<script>
$(document).ready(function(){
 var itemsToShow =  $(".current_page_item").data("group")
 $(".page_item[data-group='" + itemsToShow  + "']").show()
});
</script>

<ul>
  <li class="page_item current_page_item" data-group="1">
    <a href="http://exampel.com/1">Jobba hos oss</a>
    <ul class="children">
      <li class="page_item" data-group="1">
        <a href="http://exampel.com/2">Anna-Lena jobbar hos oss</a>
      </li>
      <li class="page_item" data-group="1">
        <a href="http://exampel.com/3">LuÃs jobbar hos oss</a>
      </li>
    </ul>
  </li>
  <li class="page_item" data-group="2">
    <a href="http://exampel.com/4">Lediga jobb</a>
  </li>
  <li class="page_item" data-group="3">
    <a href="http://exampel.com/5">Cookie policy</a>
  </li>
  <li class="page_item" data-group="4">
    <a href="http://exampel.com/6">FÃ¶r medarbetare</a>
  </li>
  <li class="page_item" data-group="5">
    <a href="http://exampel.com/7">Information</a>
  </li>
</ul>

0 commentaires

0
votes

Initialement, définissez tous les éléments de la page pour qu'ils ne s'affichent pas, .page_item {display: none} , puis, lorsque vous êtes prêt, exécutez ceci:

$(document).ready(function(){
    var par = $(".current_page_item").parents('.page_item')
        elem = (par.length) ? par : $(".current_page_item") 

    elem.show().find(".page_item").show()       
});

Je ne sais pas si je devrais J'ai supprimé / modifié ma réponse originale ou non, mais j'ai pensé à une solution plus simple par la suite.

0 commentaires

0
votes

Ceci permet d'afficher les enfants actuels et de masquer tous les enfants des autres. Dans cet extrait, vous pouvez l'essayer. cliquez sur le li principal ou ses enfants li.page_item - et tous les autres enfants seront masqués.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li>
    <a href="http://exampel.com/1">Example1</a>
    <ul class="children">
      <li class="page_item">
        <a href="http://exampel.com/2">Example2</a>
      </li>
      <li class="page_item">
        <a href="http://exampel.com/3">Example3</a>
      </li>
    </ul>
  </li>
  
  <li>
    <a href="http://exampel.com/4">Example4</a>
    <ul class="children">
      <li class="page_item">
        <a href="http://exampel.com/5">Example5</a>
      </li>
      <li class="page_item">
        <a href="http://exampel.com/6">Example6</a>
      </li>
    </ul>
  </li> 
</ul>

$('li:not(.page_item)').on('click',function (){//This is for first goal    
  let ul = $(this).children('ul:first'); 
  showCurrentChildren(ul);  
});

$('li.page_item').on('click',function (){//This is for second goal
  let ul = $(this).parent(); 
  showCurrentChildren(ul);  
});


function showCurrentChildren(ul){
  if(ul.hasClass('children')){
    $('.children').hide();//Hide all
    ul.show();//Show current children
  }
}

0 commentaires

0
votes

Merci à tous, aucune des solutions n'a fonctionné avec JS, je suppose que je ne peux pas très bien décrire le problème. J'ai résolu le problème par css uniquement:

.left_sidebar .children{
  display: none;
  margin-left: 15px;

}
.left_sidebar ul li.current_page_item .children{
  display: block;
}
li.page_item.page_item_has_children.current_page_ancestor.current_page_parent .children {
  display: block;
}
.left_sidebar li.current_page_ancestor .children{
display: block;
}

0 commentaires