Question

我正在试图滑动ul's。但我卡住了。

这是我的问题：

这些代码正在运作：

    <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 ..

Answer 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(); this上下文对象的AFAIK与jqEvt.target相同，因此它将是您的div标记。由于您要求折叠li代码，因此您可以选择使用.find()方法的代码。它需要另一个选择器来匹配所有后续元素。

Answer 2

如果内部的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();
    });
});

JS上的JS slidetoggle

2 个答案: