需要關於手風琴菜單腳本的幫助

Question

由於我對jQuery的知識很少，我正在嘗試製作一個動態的手風琴菜單。當我點擊菜單項時，我不能讓我的腳本正常工作。爲什麼這個腳本沒有在該div上監聽點擊事件？

我把我的劇本是</body>

<script> 

      $("#eventday > li > div").click(function(){ 

       if(true == $(this).next().is(':visible')) { 
        $('#eventday ul').slideUp(300); 
       } 
       $(this).next().slideToggle(300); 
      }); 

      $('#eventday ul:eq(0)').show(); 

</script> 

我的看法是上面（我使用Laravel的刀片視圖）：

<ul id="eventday"> 
    @foreach ($showings as $showing) 
    <li><h5>{{ $showing->show->name }}</h5> 
     <ul> 
      <li><a href='#'>{{ $showing->show->name }}</a></li> 
      <li><a href='#'>{{$showing->theater->name}}{{ $showing->price }}tl</a></li> 
     </ul> 
    </li> 
    @endforeach 
</ul> 

我的CSS設置：

#eventday{ 
    list-style: none; 
    padding: 0 0 0 0; 
    width: 370px; 

} 
#eventday div{ 
    display: block; 
    cursor: pointer; 
    border:2px solid #a1a1a1; 
    padding:10px 40px; 
    background:#fefabc; 
    width:200px; 
    border-radius:25px 
} 
#eventday ul { 
    list-style: none; 
    padding: 0 0 0 0; 
} 
#eventday ul{ 
    display: none; 
} 
#eventday ul li { 
    font-weight: normal; 
    cursor: auto; 
    background-color: #fff; 
    padding: 0 0 0 7px; 
} 
#eventday a { 
    text-decoration: none; 
} 
#eventday a:hover { 
    text-decoration: underline; 
} 

你能幫我做這個菜單嗎？

Answer 1

環繞你的jQuery中

jQuery(document).ready(function() { 
    // Place your code here 
}); 

執行JavaScript 後 DOM已經被加載！

和改善你的jQuery代碼：

// Cache result 
var $eventday = $('#eventday'); 

// Use jQuerys .on() 
$eventday.on('click', '> li > div', function() { 
    // Cache results 
    var $divClicked = $divClicked(this); 
    var $nextDiv = $divClicked.next(); 

    if ($nextDiv.next().is(':visible') == true) { 
     $eventday.find('ul').slideUp(300); 
    }; 

    $nextDiv.slideToggle(300); 
}); 

$eventday.find('ul:eq(0)').show();