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做手风琴。

首先是基本的HTML。有两个类使用..没有真正的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

为什么你的alert section永远不会是真的，因为你有将var id;设置为本地变量。因为那个价值是从不存储，并且每次点击它总是保持未定义函数被执行，因此使其成为全局变量。
还有另一个问题，你已经为click事件写了 锚标记 $('#nav-list li a').click(function() {...}，因此this.id将尝试使用隐藏ID而不是li，因此，你需要将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;
    });
});

或者您可以将var id;设为全局，并获取父的id，即li，而不是将ID移动到锚标记。

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

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

2 个答案: