一次只能打开一个手风琴面板

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>

有这个简单的手风琴，希望一次只打开一个手风琴面板。我的代码一直工作，直到我两次点击同一个面板试图关闭它。它不会关闭，并且总是有一个面板打开。有谁能指出我的逻辑哪里出了问题，以及如何解决？我包含了一段代码片段：

Answer 1

好的，另一个尝试用不同/简单的方法用JQuery做手风琴。

首先，基本的超文本标记语言。使用了两个类...没有真正的css，只是使用类名作为选择器。有. selector div和. text div。您可以在http://www.infohio.org/sample.看到这一点

<ul>
  <li>
    <div id="select1" class="selector">Select 1</div>
    <div id="text1" class="text" style="display: none;">Text Goes Here</div>
  </li>
  <li>
    <div id="select2" class="selector">Select 2</div>
    <div id="text2" class="text" style="display: none;">Text Goes Here</div>
  </li>
  <li>
    <div id="select3" class="selector">Select 3</div>
    <div id="text3" class="text" style="display: none;">Text Goes Here</div>
  </li>
  <li>
    <div id="select4" class="selector">Select 4</div>
    <div id="text4" class="text" style="display: none;">Text Goes Here</div>
  </li>
</ul>

和JQuery：

jQuery(function($) {
   $(".selector").on("click",function() {
      var id=$(this).attr("id").replace("select","");
      $(".text").hide();
      $("#text"+id).show(500);
   });
});

单击选择器时，它使用选择器ID来获取关联的文本ID。然后隐藏所有. text div并显示选定的. text div。

Answer 2

>

还有一个问题，您已经为锚点标记编写了事件（“#nav list li a”）。单击（function（）{…}，因此。id将尝试检索锚的id，而不是李的id，因此您需要将id更改为锚标记。

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

或者您可以使变量idglobal并获取父项的id，即li，而不是将id移动到锚定标记。

演示

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