0

我正在尝试滑动切换 ul 的。但我卡住了。

这是我的问题：

这些代码正在工作：

    <div class="splitleft" onclick="toggle_item(b)">
        <?php echo $admin_logs ?>
        <ul class="menu" id="b">
            <li><a href="index.php?content=admin&page=show_logs_all"><?php echo $admin_logs_desc ?></a></li>
            <li><a href="index.php?content=admin&page=show_logs_player"><?php echo $admin_watch_players ?></a></li>
            <li><a href="index.php?content=admin&page=show_logs_admins"><?php echo $admin_watch_admins ?></a></li>
        </ul>
    </div>
<script>function toggle_item(e){$(e).slideToggle();}</script>

但我不想要它。我想要这样：

<ul class="menu" onclick="toggle_item(b)" id="b">
    <li><a href="index.php?content=admin&page=show_logs_all"><?php echo $admin_logs_desc ?></a></li>
    <li><a href="index.php?content=admin&page=show_logs_player"><?php echo $admin_watch_players ?></a></li>
    <li><a href="index.php?content=admin&page=show_logs_admins"><?php echo $admin_watch_admins ?></a></li>
</ul>

有人可以帮助我:)我真的不擅长js ..

4

2 回答 2

1

您正在使用 jQuery。有一个简单的方法。在您的<head>标签中添加<script>：

jQuery(function($){
    $('#b').click(function( jqEvt ) {
        $(this).find('li').slideToggle();
    });
});

进一步解释点点滴滴：

jQuery(function($){...})是 的一种简短而可靠的形式$(document).ready(function(){...})。传递给函数的参数是 jQuery 对象。此版本可确保您在另一个使用该$变量时使用 jQuery 框架。

$('#b')我希望你有足够的知识来理解这一点。如果不是，这是您的选择器，它会导致 jQuery 选择您未排序的列表元素。实际上它选择了最后一个带有属性的元素id="b"，尽管应该只有一个。其他所有内容都是格式错误的 HTML。

.click(function( jqEvt ) {...})将单击事件的事件侦听器绑定到选定元素。该jqEvt参数是一个标准化的事件对象。

$(this).children().slideToggle();thiscontext 对象与 AFAIK 相同，jqEvt.target因此它将成为您的div标签。由于您要求折叠li标签，您可以使用.find()方法选择标签。它需要另一个选择器来匹配所有后续元素。

于 2013-05-04T19:42:36.857 回答
1

如果里面的 LI 项目不可见，则您的 UL 项目在页面上不包含任何“空格”。因此，如果事件附加到 UL，则单击不会执行任何操作。

您需要将事件附加到用户可以实际单击的内容上。没有任何代码来澄清这一点，我所能做的就是推测......

HTML：

<div class="splitleft">
    <?php echo $admin_logs ?>
    <a id="ulOpener" href="#">Click me to open the UL</a>
    <ul class="menu" id="b">
        <li><a href="index.php?content=admin&page=show_logs_all"><?php echo $admin_logs_desc ?></a></li>
        <li><a href="index.php?content=admin&page=show_logs_player"><?php echo $admin_watch_players ?></a></li>
        <li><a href="index.php?content=admin&page=show_logs_admins"><?php echo $admin_watch_admins ?></a></li>
    </ul>
</div>

JS：

jQuery(function($) {
     $('#ulOpener').click(function() {
        $('#b').slideToggle();
    });
});
于 2013-05-04T19:57:14.117 回答