jquery - 一次仅打开一个折叠面板

Question

$(document).ready(function(){
	var allPanels = $('.accordian li div');
	

	allPanels.hide();
	$('#nav-list li a').click(function() {
		var id;
		
		if(this.id == id) {
			allPanels.slideUp('slow');
			alert("hello");
		}
		else {
			allPanels.slideUp('slow');
			$(this).parent('li').find('div').toggle('slow');
			id = this.id;
		}

		return false;

	});
});

.accordian  {
	
	width: 300px;
	height: 400px;
}

.accordian li {
	width: 100%;
	list-style-type: none;
	padding: 10px;
    border: 1px solid black;
    border-bottom: 0; 

}
.accordian li:last-child {
	border-bottom: 1px solid black;
}
.accordian a {
	display: block;
	width: 100%;
	color: black;
	text-decoration: none;
	font-weight: bold;
	background-color: #a3a3a3;
}
.contentArea {
	border-top: 0; 
    font-size: 12px;
    background-color: #7BBF6A;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="nav-list" class="accordian">
		<li id="select_1">
			<a href="">Some Text</a>
			<div class="contentArea">
				"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			</div>
		</li>
		<li id="talk_1">
			<a href="">Some Text</a>
			<div class="contentArea">
				"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			</div>
		<li id="talk_2">
			<a href="">Some Text</a>
			<div class="contentArea">
				"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			</div>
		</li>
		<li id="talk_3">
			<a href="">Some Text</a>
			<div class="contentArea">
				"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			</div>
		</li>
		<li id="talk_8">
			<a href="">Some Text</a>
			<div class="contentArea">
				"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			</div>
		</li>
		<li id="talk_9">
			<a href="">Some Text</a>
			<div class="contentArea">
				"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			</div>
		</li>
	</ul>

有一个简单的 Accordion ，并且希望一次只打开一个 Accordion 面板。我的代码一直有效，直到我单击同一个面板两次试图关闭它。它不会关闭，并且始终有一个面板打开。谁能指出我的逻辑哪里出了问题以及如何解决？我已经包含了一个代码片段:

Answer 1

1. 为什么您的警报部分永远不会成立的问题是因为，您有将 var id; 设置为局部变量。因为该值是从未存储，并且每次单击时它始终保持未定义状态函数被执行，因此将其设为全局变量。

2. 还有一个问题，您编写了 click 事件 anchor 标记 $('#nav-list li a').click(function() {...}，因此 this.id将尝试检索 anchor 的 ID，而不是 li 的 ID，因此你 需要将id更改为 anchor 标记。

JS:

$(document).ready(function(){
    var allPanels = $('.accordian li div');

    var id;
    allPanels.hide();
    $('#nav-list li a').click(function() {          
        if(this.id == id) {
            allPanels.slideUp('slow');
            alert("hello");
        }
        else {
            allPanels.slideUp('slow');
            $(this).parent('li').find('div').toggle('slow');
            id = this.id;
        }
        return false;
    });
});

或者您可以将 var id; 设为全局并获取 parent 的 id，即 li将 id 移动到 anchor 标记。

<强> DEMO

JS:

$(document).ready(function(){
    var allPanels = $('.accordian li div');

var id;
    allPanels.hide();
    $('#nav-list li a').click(function() {  
        if($(this).closest('li').attr('id') == id) {
            $(this).parent('li').find('div').toggle('slow');            
        }
        else {
            allPanels.slideUp('slow');
            $(this).parent('li').find('div').toggle('slow');
            id = $(this).closest('li').attr('id');
        }
        return false;
    });
});