0

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

我试过改变一些东西来让它工作，但没有一个工作。

前任：$('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>';
}

查询：

$(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>
4

3 回答 3

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 不正确。

于 2012-04-27T16:03:39.997 回答
0

尝试这个：

$(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>。

于 2012-04-27T15:47:17.940 回答
0

可能想试试这个：

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

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

jsFiddle 示例。

于 2012-04-27T16:24:46.780 回答