javascript - 使用 jQuery 和 Bootstrap 自动折叠嵌套列表

Question

我的问题是创建一种方法(在单击元素时)折叠嵌套列表中不是目标元素或关联父容器的所有其他元素。我环顾四周，但没有任何适合我的 list 。

基本上，我正在尝试折叠除目标元素之外的所有事件列表元素。

• 使用 bootstrap 可以处理很多事情。
• 我有一种方法可以使列表元素在单击时处于事件状态。
• 警报似乎输出了需要受影响的元素的 ID，并且没有任何崩溃。有什么建议吗？

列表结构:

 - Building
  - Floor
    - Room

代码:

//JS - Attempt to collapse all elements not clicked:

$('.expandable-menu a').click(function(e) {
    var parent = $("#" + e.target.id).attr('data-parent');
    $(".expandable-menu a").each(function() {
        //if 1. has class active 2.Not target event,  3.Not a parent of target 
        if ($(this).hasClass('active') && $(this).attr('id') !== (e.target.id) && $(this).attr('id') !== (parent)) {
            // alert($(this).attr('id') );
            $(this).removeClass('active').addClass('collapsed');
        }
    });
});

<!--HTML - Example chunk from list:-->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<ul>
    <li id="level1">
        <a id="title-b0" href="#" data-toggle="collapse" data-parent="#title-loc" data-target="#content-b0" class="collapsed" aria-expanded="false">
            <span class="glyphicon glyphicon-triangle-right"></span>
            Biology
        </a>
        
        <ul id="content-b0" class="nav collapse" style="height: 0px;" aria-expanded="false">
            <li id="level2">
                <a id="title-b0f0" class="" href="#" data-toggle="collapse" data-parent="title-b0" data-target="#content-f0" aria-expanded="true">
                    <span class="glyphicon glyphicon-triangle-bottom"></span> 
                    Floor 4 
                </a>
                
                <ul id="content-f0" class="nav collapse in" style="" aria-expanded="true"></ul>
                <a id="title-b0f1" class="" href="#" data-toggle="collapse" data-parent="title-b0" data-target="#content-f1" aria-expanded="true">
                    <span class="glyphicon glyphicon-triangle-bottom"></span>
                    Floor 3
                </a>
                
                <ul id="content-f1" class="nav collapse in" style="" aria-expanded="true">
                    <li>
                        <a id="room-select" href="#">    
                            <span class="glyphicon glyphicon-unchecked"></span>
                            Room 112
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Answer 1

这个例子可能对你有帮助

$(document).ready(function() {
    $('.tree li').each(function() {
        if ($(this).children('ul').length > 0) {
            $(this).addClass('parent');
        }
    });

    $('.tree li.parent > a').click(function() {
        $(this).parent().toggleClass('active');
        $(this).parent().children('ul').slideToggle('fast');
    });

    $('#all').click(function() {

        $('.tree li').each(function() {
            $(this).toggleClass('active');
            $(this).children('ul').slideToggle('fast');
        });
    });

    $('.tree li').each(function() {
        $(this).toggleClass('active');
        $(this).children('ul').slideToggle('fast');
    });

});

a{
	cursor:pointer;
}
.tree ul {
    list-style: none outside none;
}
.tree li a {
    line-height: 25px;
}
.tree > ul > li > a {
    color: #3B4C56;
    display: block;
    font-weight: normal;
    position: relative;
    text-decoration: none;
}
.tree li.parent > a {
    padding: 0 0 0 28px;
}
.tree li.parent > a:before {
    background-position: 25px center;
    content: "-"; 
    display: block;
    height: 21px;
    left: 0;
    position: absolute;
    top: 2px;
    vertical-align: middle;
    width: 23px;
}
.tree ul li.active > a:before {
    background-position: 0 center;
}
.tree ul li ul {
    border-left: 1px solid #D9DADB;
    display: none;
    margin: 0 0 0 12px;
    overflow: hidden;
    padding: 0 0 0 25px;
}
.tree ul li ul li {
    position: relative;
}
.tree ul li ul li:before {
    border-bottom: 1px dashed #E2E2E3;
   
    left: -20px;
    position: absolute;
    top: 12px;
    width: 15px;
}
#wrapper {
    margin: 0 auto;
    width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrapper">
<div class="tree">
<button id="all">Toggle All</button>
		
<ul>
		<li><a>First Level</a>
			<ul>
				<li><a>Second Level</a></li>
				<li><a>Second Level</a></li>
				<li><a>Second Level</a></li>
			</ul>
		</li>
		<li><a>First Level</a>
			<ul>
				<li><a>Second Level</a>
					<ul>
						<li><a>Third Level</a></li>
						<li><a>Third Level</a></li>
						<li><a>Third Level</a>
							<ul>
								<li><a>Fourth Level</a></li>
								<li><a>Fourth Level</a></li>
								<li><a>Fourth Level</a>
									<ul>
										<li><a>Fifth Level</a></li>
										<li><a>Fifth Level</a></li>
										<li><a>Fifth Level</a></li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a>Second Level</a></li>
			</ul>
		</li>
		<li><a>First Level</a>
			<ul>
				<li><a>Second Level</a></li>
				<li><a>Second Level</a></li>
			</ul>
		</li>
</ul>
</div>
</div>