0

我被困在jQuery中。我正在使用 jQuery 切换列表元素，当我打开一个列表元素时，我希望它的所有子元素都关闭。

HTML

<div id="listContainer">
    <ul id="expList">
        <li>Sessions
            <ul>
                <c:forEach var="item" items="${sessionFormData.classSessionList}" varStatus="sessionstatus">
                    <li>${item.sessionName}
                        <ul>
                            <c:forEach items="${item.courseList}" var="course" varStatus="classstatus">
                                <c:if test="${item.sessionId==course.sessionId}">
                                    <li>${course.courseName}
                                        <ul>
                                            <c:forEach items="${studentSectionList}" var="section" varStatus="sectionstatus">
                                                <c:if test="${course.courseId==section.courseId}">
                                                    <li>${section.sectionName}</li>
                                                </c:if>
                                            </c:forEach>
                                        </ul>
                                    </li>
                                </c:if>
                            </c:forEach>
                        </ul>
                    </li>
                </c:forEach>
            </ul>
        </li>
    </ul>
</div>

jQuery

在这里，我现在用这个 jQuery 列出项目如何折叠它的兄弟。我已经尝试过该.sibling()功能。有没有这样的方法？

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

$(document).ready(function () {
    prepareList();
});

CSS

#listContainer {
    margin-top:15px;
}
#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 1px;
    padding-left: 20px;
    background-repeat: no-repeat;
}
/* Collapsed state for list element */
 #expList .collapsed {
    background-image: url(/oltapp/Images/plus-icon.png);
}
/* Expanded state for list element
    /* NOTE: This class must be located UNDER the collapsed one */
 #expList .expanded {
    background-image: url(/oltapp/Images/minus-icon.png);
}
4

1 回答 1

0

我已经按照您的意图修复了代码

JS代码：

function prepareList() {
$('#expList').find('li:has(ul)')
    .click(function (event) {

    //Newly added code block Begin 
    //Extract  each sibling and collapse them if expanded
    $(this).siblings().each(function () {
        //alert($(this));
        var $this = $(this);
        if ($this.hasClass('expanded')) {
            $this.removeClass('expanded').addClass('collapsed');
            //$this.children('ul').toggle('medium');
            $this.find('ul').css('display', 'none');
        }
    });
    //Newly added code block End

    if (this == event.target) {
        $(this).toggleClass('expanded');
        $(this).children('ul').toggle('medium');
    }
    return false;
})
.....

新添加的 js 代码带有以下注释标记， “//新添加的代码块 Begin/End”

这是一个用于现场演示的JSFIDDLE

活着，梦想，珍惜：）

快乐编码:)

于 2013-07-18T06:06:21.660 回答