我被困在jQuery中。我使用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); 
}

来源

2013-07-17 kushal jain

ü可以创建一个小提琴这，http://jsfiddle.net。这将很容易修复它这种方式 – dreamweiver

这不是HTML，所以它不可能在它上面工作 – iConnor

给HTML代码.. – Anujith

我有固定的代码，你打算

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代码标记有如下评论， “// Ne WLY添加的代码块开始/结束“

下面是现场演示

现场，梦想JSFIDDLE，珍惜:)

编码快乐:)

来源

2013-07-18 06:06:21 dreamweiver

如何折叠jQuery中的兄弟？

HTML

jQuery的

CSS

回答

相关问题