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 回答