Аккордеон с несколькими ссылками

Question

Я беру эту статью CSS-Tricks и преобразовываю ее в UL> LI вместо подхода DT> DD. Я просто хочу, чтобы розовый ящик показывал подзаголовки при нажатии.

По какой-то причине, хотя я не могу заставить его работать. Я создал jsFiddle его здесь (нажмите на розовую коробку):

//Accordion 
 
\t (function($) { 
 
\t  
 
\t var allPanels = $('ul.sub-level').hide(); 
 
\t  
 
\t $('.click-me').click(function() { 
 
\t  allPanels.slideUp(); 
 
\t  alert('slide up'); 
 
     // Problem line 
 
\t  $(this).parent().next().slideDown(); 
 
\t  return false; 
 
\t }); 
 
\t 
 
\t })(jQuery);

ul { list-style: none; padding:0; margin:0; width: 400px; } 
 
ul li { position:relative; background: #fafafa; margin-bottom:3px; height:20px; } 
 
ul li > ul { margin-left: 30px; background: #e3e3e3; } 
 

 
.click-me { display:block; width: 20px; height: 20px; position: absolute; top:0; right:0; background: #e4f; cursor: pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#">Link somewhere</a></li> 
 
    <li><a href="#">Link somewhere</a></li> 
 
    <li class="test"> 
 
     <a href="http://google.com">Link somewhere</a> 
 
     
 
     <!-- I want to reveal accordion using this span tag --> 
 
     <span class="click-me"></span> 
 
     <!-- /end --> 
 
     
 
     <ul class="sub-level"> 
 
      <li><a href="#">Link 1</a></li> 
 
      <li><a href="#">Link 2</a></li> 
 
      <li><a href="#">Link 3</a></li> 
 
      <li><a href="#">Link 4</a></li> 
 
     </ul> 
 
     <li><a href="#">Link somewhere</a></li> 
 
    </li> 
 
</ul>

http://jsfiddle.net/ndczc728/1/

Проблема заключается в следующем (я думаю):

// Problem line 
$(this).parent().next().slideDown(); 

Кто-нибудь?

Answer 1

Вам не нужно использовать родителя. Кроме того, вы должны удалить фиксированную высоту от li элементов:

//Accordion 
 
(function($) { 
 

 
    var allPanels = $('ul.sub-level').hide(); 
 

 
    $('.click-me').click(function() { 
 
    allPanels.slideUp(); 
 
    // Problem line 
 
    $(this).next().slideDown(); 
 
    return false; 
 
    }); 
 

 
})(jQuery);

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 400px; 
 
} 
 
ul li { 
 
    position: relative; 
 
    background: #fafafa; 
 
    margin-bottom: 3px; 
 
} 
 
ul li > ul { 
 
    margin-left: 30px; 
 
    background: #e3e3e3; 
 
} 
 
.click-me { 
 
    display: block; 
 
    width: 20px; 
 
    height: 20px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    background: #e4f; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#">Link somewhere</a> 
 
    </li> 
 
    <li><a href="#">Link somewhere</a> 
 
    </li> 
 
    <li class="test"> 
 
    <a href="http://google.com">Link somewhere</a> 
 

 
    <!-- I want to reveal accordion using this span tag --> 
 
    <span class="click-me"></span> 
 
    <!-- /end --> 
 

 
    <ul class="sub-level"> 
 
     <li><a href="#">Link 1</a> 
 
     </li> 
 
     <li><a href="#">Link 2</a> 
 
     </li> 
 
     <li><a href="#">Link 3</a> 
 
     </li> 
 
     <li><a href="#">Link 4</a> 
 
     </li> 
 
    </ul> 
 
    <li><a href="#">Link somewhere</a> 
 
    </li> 
 
    </li> 
 
</ul>