Sadece başlık öğesinin nasıl değiştirileceği değil liste

Question

<ul> öğesini genişleten ve basıldıktan sonra gizleyen bu işlevi kullanıyorum.Ama <li> numaralı tuşa bastığımda da kapanacak veya genişleyecektir. Sadece <h4> tıklandığında geçiş yapmayı nasıl sağlayabilirim? peşin

$('.category ul').hide(); 

$('.sub').click(function() { 
    $(this).find('ul').slideToggle(); 
}); 

<ul class="category text-center"> 
    <li class="sub"> 
     <h4><b>Licenses</b></h4> 
     <ul class="archive_posts"> 
      <li class="posts"><a href="www.google.com" target="_blank">Licence types and users plans</a></li> 
      <li class="posts"><a href="#">Adding new licence</a></li> 
      <li class="posts"><a href="#">Updating licence</a></li> 
      <li class="posts"><a href="#">Removing licence</a></li> 
     </ul> 
    </li> 
</ul> 

teşekkürler.

Answer 1

Değişiklikler

►

Çalışma Demo'yu $(this).next() için $('.sub h4') ► $(this).find('ul') değişti

için

$('.category ul.archive_posts').hide(); 
 

 
$('.sub h4').click(function() { 
 
    $(this).next().slideToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="category text-center"> 
 
    <li class="sub"> 
 
    <h4><b>Licenses</b></h4> 
 
    <ul class="archive_posts"> 
 
     <li class="posts"><a href="www.google.com" target="_blank">Licence types and users plans</a> 
 
     </li> 
 
     <li class="posts"><a href="#">Adding new licence</a> 
 
     </li> 
 
     <li class="posts"><a href="#">Updating licence</a> 
 
     </li> 
 
     <li class="posts"><a href="#">Removing licence</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

değişti yapılmış

Answer 2

Bağlamayı h4 olarak değiştirin, daha sonra kaydırma için bir sonraki ul.archive_posts numaralı telefonu hedefleyin.

$('.category ul').hide(); 
$('h4').click(function() { 
    $(this).next('ul.archive_posts').slideToggle(); 
}); 

bu çalışma gör Fiddle JS: yardımcı https://jsfiddle.net/rwvdf8ys/1/

Umut.

Answer 3

Komşuları bulmak ve kapatmak için siblings('ul') seçiciyi kullanabilirsiniz. $(".sub h4"), h4 ürününüze tıklanabilir öğeleri sınırlandırırken.

$('.category ul').hide(); 
 
$('.sub h4').click(function() { 
 
    console.log('test'); 
 
    $(this).siblings('ul').slideToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="category text-center"> 
 
    <li class="sub"> 
 
    <h4><b>Licenses</b></h4> 
 
    <ul class="archive_posts"> 
 
     <li class="posts"><a href="www.google.com" target="_blank">Licence types and users plans</a> 
 
     </li> 
 
     <li class="posts"><a href="#">Adding new licence</a> 
 
     </li> 
 
     <li class="posts"><a href="#">Updating licence</a> 
 
     </li> 
 
     <li class="posts"><a href="#">Removing licence</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 4

Bu deneyebilirsiniz.

$('li.sub h4').click(function() { 
$(this).next().slideToggle(); 
}); 

Answer 5

Sorun, $ ('this') bulmaktır ('ul'). SlideToggle();

'Bu', işlevi gösteren nesneyi temsil eder. Bu durumda h4'tür. H4'ün noe ul var, bu yüzden onu bulamıyorsunuz. ama $ üzerinde ul bulabilirsiniz Burada

ann örneği

$('.category ul').hide(); 

$('h4').click(function() { 
    $('.sub').find('ul').slideToggle(); 
}); 


      <ul class="category text-center"> 
       <li class="sub"> 
        <h4 id="foo"><b>Licenses</b></h4> 
        <ul class="archive_posts"> 
         <li class="posts"><a href="www.google.com" target="_blank">Licence types and users plans</a></li> 
         <li class="posts"><a href="#">Adding new licence</a></li> 
         <li class="posts"><a href="#">Updating licence</a></li> 
         <li class="posts"><a href="#">Removing licence</a></li> 
        </ul> 
       </li> 
      </ul> 

olan js keman ('alt.'): `.sub h4` için

https://jsfiddle.net/8hvc4cfh/