Question

为什么这个jquery没有滑动切换我的php生成列表？

我已经尝试过改变一些事情来使这个工作起来而且都没有用。

EX：$('ol>li:has(ol)').click $(this).children('ol').slideToggle(); $(this).siblings('ol').slideToggle();

PHP：

function listFolderFiles($dir){
    $ffs = scandir($dir);
    echo '<ol class="list_hold">';
    foreach($ffs as $ff){
        if($ff != '.' && $ff != '..'){
            echo '<li class="list">'.$ff;
            if(is_dir($dir.'/'.$ff)) listFolderFiles($dir.'/'.$ff);
            echo '</li>';
        }
    }
    echo '</ol>';
}

Jquery的：

$(document).ready(function(){
    $('ol ol').slideUp();
    $('ol>li').click(function(){
        $(this).next('ol').slideToggle();
    });
});

HTML示例：

<ol>
<li class="list">find_folders
<ol class="list_hold" style="display: none; ">
    <li class="list">Thumbs.db</li>
    <li class="list">find.css</li>
    <li class="list">find.php</li>
    <li class="list">index.php</li>
    <li class="list">minus.png</li>
    <li class="list">plus.png</li>
    <li class="list">test folder
        <ol class="list_hold" style="display: none; ">
            <li class="list">bananas</li>
        </ol>
    </li>
</ol>
</li>
</ol>

Answer 1

根据您提供的html，您需要执行以下操作：

$('li:has(ol)').each(function () {
    $(this).children('ol').slideUp();
    $(this).on("click", function (event) {
        event.stopPropagation();
        $(this).children('ol').slideToggle();
    });
});

http://jsfiddle.net/farneman/n2Arc/2

主要问题是您的选择器与您的实际html不正确。

Answer 2

试试这个：

$(document).ready(function(){
    $('ol ol').slideUp();
    $('ol>li').on("click", function(){
        $(this).next('ol').slideToggle();
    });
});

on适用于动态生成的内容，例如PHP echo创建的内容。当您向其添加单击处理程序时，页面上不存在echoed元素;这就是你的点击事件不起作用的原因。

无法从您的PHP中看到您的HTML是什么样的，但您可能需要这样的东西？

$('ol>li').live("click", function(){
    $(this).parent().next('ol').slideToggle();
});

假设您的HTML看起来像这样：

<ol>
    <li> </li>
</ol>

<ol>
    <li> </li>
</ol>

问题是this引用了点击的元素（在这种情况下为<li>），在您的情况下，它没有<ol>兄弟姐妹。您需要<li>的父级，下一个<ol>。

的父级

Answer 3

可能想尝试一下：

$('ol ol').slideUp();
$('ol>li').click(function(e) {
    e.stopPropagation();
    $(this).children('ol').slideToggle();
});

您使用的.next（）适用于兄弟元素，但您的有序列表实际上是父列表的子元素。在这种情况下，您需要使用像find（）或children（）这样的选择器。

<强> jsFiddle example

为什么这个jquery没有滑动切换我的php生成列表？

3 个答案: