使用jQuery UI的嵌套手风琴不显示下一个列表项

Question

JS小提琴在这里列出：
http://jsfiddle.net/sd1642/uou44bbe/2/

HTML部分====

<ul class = "trackAccordion">
<li class = "proTrack">
<a href="#">PROFESSIONAL TRACK</a>
</li>

<li>
<a href="#"><span class = "accoTrack"> CERTIFICATION TRACK </span> </a>
    <ul class = "tracks" id = "cert_Track">
    <li>DJ Certificate Program</li>
    <li>Music Production Certificate Program</li>
    </ul>
</li>

<li> <!-- element which hold Individual class in accordian -->

<a href="#">INDIVIDUAL CLASSES</a>
<ul class = "course_beginner trackAccordion nestedElemAccor">   

        <li class = "nestedElems">
            <a href="#" class="begNestElem">BEGINNER</a> 
                <ul class="tracks">
                <li>Intro to DJing (DJ 101)</li>
                <li>Intensive Beginners (DJ INT)</li>
                <li>Intensive Beginners (DJ INT)</li>
                </ul>
        </li>

        <li class = "nestedElems"> 
        <a href="#" class="intNestElem">INTERMEDIATE</a>
                <ul class="tracks">
                <li>Mixing (M 202)</li>
                <li>Scratching (S 202)</li>
                <li>Music Production II (MP 202)</li>
                </ul>
        </li>

        <li class = "nestedElems">
                <a href="#" class="advNestElem">ADVANCED</a> 
                <ul class="tracks">
                <li>Mixing III (M 303)</li>
                <li>Mixing IV (M 404)</li>
                <li>Mixing V (M 505)</li>
                <li>Scratching III (S 303) </li>
                <li>Battle DJing (S 404)</li>
                <li>Music Production III (MP 303)</li>
                <li>Music Production IV (MP 404)</li>
                <li>Master Class - Team Routines</li>
                </ul>
        </li>

</ul>
</li> <!-- END element which hold Individual class in accordian -->

<li>
<a href="#">FOR KIDS</a>
    <ul class = "tracks" id = "kids_Track">
    <li>Summer Camps</li>
    <li>Afterschool Classes</li>
    </ul>
</li>

<li>
<a href="#">FREE OPEN HOUSES</a> 
</li>

<li>
<a href="#">MORE OPTIONS</a> 
<ul class = "tracks" id = "more_Track">
<li>Private Lessons</li>
<li>Group Events</li>
<li>Workshops</li>
</ul>
</li>

JS ====

    $("ul.trackAccordion").accordion({
    collapsible: true,
    active: false,`enter code here`
    heightStyle: "content"
  });

=============

我使用jquery UI创建了一个嵌套的手风琴。

无论何时单击嵌套的手风琴，其后面的所有元素都会消失。关于如何保持元素显示的任何建议？

我认为最好通过图片描述这个问题：

Answer 1

我认为问题出在以下css中的height：

.trackAccordion {
  margin: 50px auto;
  background-color: #2d2d2d;
  height: 790px;    //Check by commenting the height.
  width: 296px;
  border-radius: 5px;
  color: white;
  font-family: 'Helvetica';
  font-weight: bold;
  padding-top: 30px;
  font-size: 1em;
  text-align: center;
  overflow: hidden;
}