0

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;
}

このメニューを機能させるのを手伝ってもらえますか?

4

1 に答える 1

2

jQuery をラップする

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

DOMがロードされた後に JavaScript を実行するには!

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();
于 2013-01-22T13:00:47.440 に答える