Question

由于我对jQuery知之甚少，我正在尝试制作一个动态的手风琴菜单。当我单击菜单项时，我无法让我的脚本正常工作。为什么这个脚本不会在该div上监听click事件？

我的脚本位于</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 AFTER 已加载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();

需要有关手风琴菜单脚本的帮助

1 个答案: