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>';
}

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>
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();
    });
});

onPHPによって作成されたものなど、動的に生成されたコンテンツに対して機能します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 に答える