Убрать блок при клике

207

19 июня 2018, 16:20

Нужно чтобы по нажатию на "cat1" появлялся блок "subcat", а блок "cat" либо исчезал, либо "subcat" перекрывал его

$('.cat li').click(function(){ 
  $(this).hide(); 
  $(this).children('.subcat').show(); 
})

.cat { 
  list-style:none; 
  background: #ccc; 
} 
 
.subcat { 
  display: none; 
  list-style:none; 
  padding: 0; 
  background: violet; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="cat"> 
  <li>cat1 
    <ul class="subcat"> 
      <li>subcat2</li> 
      <li>subcat2</li> 
      <li>subcat2</li> 
      <li>subcat2</li> 
    </ul> 
  </li> 
  <li>cat1</li> 
  <li>cat1</li> 
  <li>cat1</li> 
</ul>

Answer 1

Вам надо скрывать не весь li, а только текст внутри:

$('.cat li').click(function(){ 
  $(this).children('.content').hide(); 
  $(this).children('.subcat').show(); 
})

.cat { 
  list-style:none; 
  background: #ccc; 
} 
 
.subcat { 
  display: none; 
  list-style:none; 
  padding: 0; 
  background: violet; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="cat"> 
  <li> 
    <span class="content">cat1</span> 
    <ul class="subcat"> 
      <li>subcat2</li> 
      <li>subcat2</li> 
      <li>subcat2</li> 
      <li>subcat2</li> 
    </ul> 
  </li> 
  <li> 
    <span class="content">cat1</span> 
  </li> 
  <li> 
    <span class="content">cat1</span> 
  </li> 
  <li> 
    <span class="content">cat1</span> 
  </li> 
</ul>

Answer 2

У вас не понятно что такое cat1, неправильна создана html структура (li не закрыто где надо) и вы ищите при помощи jquery соседа, а надо потомка (.children() ) Но основная проблема в неправильном html