Question

我在这里有一个foreach循环。对于它打印的每个项目，都有一个可扩展/可折叠的注释部分。

我遇到的问题是，当我点击某个项目的“全部展开”时，它会立即展开循环中每个项目的注释。鉴于，我只想查看该特定项目的评论。

我知道它与ID和Classes有关，但我对JQuery没有经验。所以请帮忙！

<?php
foreach ($items as $item) {

   echo item['comment'];                                
   echo $item['full_name']; ?>

<div id="listContainer">   
            <div class="listControl">
                <a class="expandList">Expand All</a>
                <a class="collapseList">Collapse All</a>
            </div>
            <ul class="expList">
                <li>Item A
                    <ul>
                        <li>Item A.1
                            <ul>
                                <li><span>fidjis</span></li>
                            </ul>
                        </li>
                        <li>Item A.2</li>
                        <li>Item A.3
                            <ul>
                                <li><span>iejowejfiojwiefj.</span></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>Item B</li>
                <li>Item C
                    <ul>
                        <li>Item C.1</li>
                        <li>Item C.2
                            <ul>
                                <li><span>sdfkjksdjfnjkdsfnjn</span></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
<?php

        }
        ?>

这是Jquery：

function prepareList() {
    $('.expList').find('li:has(ul)')
    .click( function(event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })
    .addClass('collapsed')
    .children('ul').hide();

    //Create the button functionality
    $('.expandList')
    .unbind('click')
    .click( function() {
        $('.collapsed').addClass('expanded');
        $('.collapsed').children().show('medium');
    })
    $('.collapseList')
    .unbind('click')
    .click( function() {
        $('.collapsed').removeClass('expanded');
        $('.collapsed').children().hide('medium');
    })

};

Answer 1

您正在循环的每次迭代中创建ID为“listContainer”的DIV，这是无效的。 ID只能使用一次。建议将Id =“listContainer”更改为class =“listContainer”

对于jQuery，问题在于您使用“折叠”类引用所有元素，而不仅仅是容器内与“全部展开”按钮相关的元素。

我没有对此进行过测试，但你会想要这些内容

//Create the button functionality
$('.expandList')
.unbind('click')
.click( function() {
    $(this).parents('.listContainer').find('.collapsed').addClass('expanded');
    $(this).parents('.listContainer').find('.collapsed').children().show('medium');
})
$('.collapseList')
.unbind('click')
.click( function() {
    $(this).parents('.listContainer').find('.collapsed').removeClass('expanded');
    $(this).parents('.listContainer').find('.collapsed').children().hide('medium');
})

这里的不同之处在于，您从单击按钮开始，使用'listContainer'类开始div，然后从那里开始查找所有'.collapsed'元素。

Answer 2

我认为您正在使用ID来安装类。 ID用于标识单个元素，而类可以应用于多于1个元素。访问单个元素时，尝试在jQuery调用中使用ID。您可以尝试以下方式：

?>
<div id="listContainer">   
        <div class="listControl">
            <a class="expandList">Expand All</a>
            <a class="collapseList">Collapse All</a>
        </div>
        <ul id="list1" class="expList">
            <li>
                Item A
                <ul>
                    <li>
                        Item A.1
                        <ul>
                            <li>
                                <span>fidjisjfisdjfisdjifjsidfj.</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        Item A.2
                    </li>
                    <li>
                        Item A.3
                        <ul>
                            <li>
                                <span>iejowejfiojwiefj.</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                Item B
            </li>
            <li>
                Item C
                <ul>
                    <li>
                        Item C.1
                    </li>
                    <li>
                        Item C.2
                        <ul>
                            <li>
                                <span> sdfkjksdjfnjkdsfnjn. </span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
<?php

    }
    ?>

你的jQuery就像

function prepareList() {
$('#list1').find('li:has(ul)')
.click( function(event) {
    if (this == event.target) {
        $(this).toggleClass('expanded');
        $(this).children('ul').toggle('medium');
    }
    return false;
})
.addClass('collapsed')
.children('ul').hide();

//Create the button functionality
$('.expandList')
.unbind('click')
.click( function() {
    $('.collapsed').addClass('expanded');
    $('.collapsed').children().show('medium');
})
$('.collapseList')
.unbind('click')
.click( function() {
    $('.collapsed').removeClass('expanded');
    $('.collapsed').children().hide('medium');
})

};

Answer 3

首先，您应该将listContainer更改为类属性。

因为ID必须是唯一的。

function prepareList() {
    $('.expList').find('li:has(ul)')
        .click( function(event) {
            if (this == event.target) {
                $(this).toggleClass('expanded');
                $(this).children('ul').toggle('medium');
            }
            return false;
        })
        .addClass('collapsed')
        .children('ul').hide();

    //Create the button functionality
    $('.expandList')
        .unbind('click')
        .click( function() {
            // walk up the tree from the clicked button 
            // and find the parent .listContainer
            var $list = $(this).parents(".listContainer");
            // find .collapsed in .listContainer
            $list.find('.collapsed').addClass('expanded');
            $list.find('.collapsed').children().show('medium');
        });

    $('.collapseList')
        .unbind('click')
        .click( function() {
            // walk up the tree from the clicked button 
            // and find the parent .listContainer
            var $list = $(this).parents(".listContainer");
            // find .collapsed in .listContainer
            $list.find('.collapsed').removeClass('expanded');
            $list.find('.collapsed').children().hide('medium');
        });
};

JQuery类vs ID

3 个答案: