jQuery手风琴 - 选择子元素

时间：2016-10-07 06:06:23

标签： jquery accordion

我试图构建一个符合某些可访问性标准的简单手风琴 - 需要它替换按钮元素，以便我可以为打开和关闭状态提供不同的可访问性文本。

如果页面上只有一个，但有多个打开并关闭所有页面，则它可以正常工作。我知道为什么这是，我知道我需要做一些事情，比如选择按钮的子元素，但我不知道如何编写它（仍在学习jQuery）。

所以我的问题是，如何更改脚本以便仅在单击的按钮下选择div 

$(function() {
	'use strict';
	$(".openAccord").click(function() {
		$(".accordion-text").slideDown("slow");
		$(".openAccord").hide();
		$(".closeAccord").show();
	});
});

$(function() {
	'use strict';
	$(".closeAccord").click(function() {
		$(".accordion-text").slideUp("slow");
		$(".closeAccord").hide();
		$(".openAccord").show();
	});
});
.accord button {
	width: 100%;
	padding: 15px;
	box-sizing:border-box;
	display: block;
	text-align: left;
	cursor: pointer;
	border: none;
	-webkit-appearance: none;
	appearance: none;
}

button.closeAccord {
	display: none;
	background-color: #fec445;
	border: none;
	-webkit-appearance: none;
	appearance: none;
}

.accord h4 {
	font-size: 18px;
	line-height: 18px;
	margin: 0;
	
}

.accordion-text {
	display: none;
	box-sizing: border-box;
	width: 100%;
	padding: 18px;
	background-color: #efefef;
}

h4.open {
	background-image:url(../images/dropdown.png);
	background-repeat: no-repeat;
	background-position: right center;
}

h4.close {
	background-image:url(../images/dropup.png);
	background-repeat: no-repeat;
	background-position: right center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accord">
	<button class="openAccord"><h4 class="open">This is the accordion heading</h4></button>
	<button class="closeAccord"><h4 class="close">This is the accordion heading</h4></button>
	<div class="accordion-text">
		<p>This is the text in the accordion</p>
	</div>
</div>
<div class="accord">
	<button class="openAccord"><h4 class="open">This is the accordion heading</h4></button>
	<button class="closeAccord"><h4 class="close">This is the accordion heading</h4></button>
	<div class="accordion-text">
		<p>This is the text in the accordion</p>
	</div>
</div>
<div class="accord">
	<button class="openAccord"><h4 class="open">This is the accordion heading</h4></button>
	<button class="closeAccord"><h4 class="close">This is the accordion heading</h4></button>
	<div class="accordion-text">
		<p>This is the text in the accordion</p>
	</div>
</div>

而不是所有的div？

4 个答案:

答案 0 :(得分：0)

$(function() {
  'use strict';
  $(".openAccord").click(function() {
    $(this).siblings(".accordion-text").slideDown("slow");
    $(".openAccord").hide();
    $(".closeAccord").show();
  });
});

$(function() {
  'use strict';
  $(".closeAccord").click(function() {
    $(this).siblings(".accordion-text").slideUp("slow");
    $(".closeAccord").hide();
    $(".openAccord").show();
  });
});
.accord button {
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  display: block;
  text-align: left;
  cursor: pointer;
  border: none;
  -webkit-appearance: none;
  appearance: none;
}
button.closeAccord {
  display: none;
  background-color: #fec445;
  border: none;
  -webkit-appearance: none;
  appearance: none;
}
.accord h4 {
  font-size: 18px;
  line-height: 18px;
  margin: 0;
}
.accordion-text {
  display: none;
  box-sizing: border-box;
  width: 100%;
  padding: 18px;
  background-color: #efefef;
}
h4.open {
  background-image: url(../images/dropdown.png);
  background-repeat: no-repeat;
  background-position: right center;
}
h4.close {
  background-image: url(../images/dropup.png);
  background-repeat: no-repeat;
  background-position: right center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accord">
  <button class="openAccord">
    <h4 class="open">This is the accordion heading</h4>
  </button>
  <button class="closeAccord">
    <h4 class="close">This is the accordion heading</h4>
  </button>
  <div class="accordion-text">
    <p>This is the text in the accordion</p>
  </div>
</div>
<div class="accord">
  <button class="openAccord">
    <h4 class="open">This is the accordion heading</h4>
  </button>
  <button class="closeAccord">
    <h4 class="close">This is the accordion heading</h4>
  </button>
  <div class="accordion-text">
    <p>This is the text in the accordion</p>
  </div>
</div>
<div class="accord">
  <button class="openAccord">
    <h4 class="open">This is the accordion heading</h4>
  </button>
  <button class="closeAccord">
    <h4 class="close">This is the accordion heading</h4>
  </button>
  <div class="accordion-text">
    <p>This is the text in the accordion</p>
  </div>
</div>

  1. 使用兄弟姐妹查找文字。

答案 1 :(得分：0)

$(function() {
	'use strict';
	$(".openAccord").click(function() {
		$(this).siblings(".accordion-text").slideDown("slow");
		$(this).hide();
		$(this).siblings(".closeAccord").show();
	});
});

$(function() {
	'use strict';
	$(".closeAccord").click(function() {
		$(this).siblings(".accordion-text").slideUp("slow");
		$(this).hide();
				$(this).siblings(".openAccord").show();
	});
});
.accord button {
	width: 100%;
	padding: 15px;
	box-sizing:border-box;
	display: block;
	text-align: left;
	cursor: pointer;
	border: none;
	-webkit-appearance: none;
	appearance: none;
}

button.closeAccord {
	display: none;
	background-color: #fec445;
	border: none;
	-webkit-appearance: none;
	appearance: none;
}

.accord h4 {
	font-size: 18px;
	line-height: 18px;
	margin: 0;
	
}

.accordion-text {
	display: none;
	box-sizing: border-box;
	width: 100%;
	padding: 18px;
	background-color: #efefef;
}

h4.open {
	background-image:url(../images/dropdown.png);
	background-repeat: no-repeat;
	background-position: right center;
}

h4.close {
	background-image:url(../images/dropup.png);
	background-repeat: no-repeat;
	background-position: right center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accord">
	<button class="openAccord"><h4 class="open">This is the accordion heading</h4></button>
	<button class="closeAccord"><h4 class="close">This is the accordion heading</h4></button>
	<div class="accordion-text">
		<p>This is the text in the accordion</p>
	</div>
</div>
<div class="accord">
	<button class="openAccord"><h4 class="open">This is the accordion heading</h4></button>
	<button class="closeAccord"><h4 class="close">This is the accordion heading</h4></button>
	<div class="accordion-text">
		<p>This is the text in the accordion</p>
	</div>
</div>
<div class="accord">
	<button class="openAccord"><h4 class="open">This is the accordion heading</h4></button>
	<button class="closeAccord"><h4 class="close">This is the accordion heading</h4></button>
	<div class="accordion-text">
		<p>This is the text in the accordion</p>
	</div>
</div>

答案 2 :(得分：0)

一个功能就足够了。没有必要为每个事件添加功能。

无需在单击函数内添加openAccord和closeAccord类，类添加this指向单击的元素。使用兄弟姐妹来查找内部元素。

$(function() {

	$(".openAccord").click(function() {
		$(this).parent().find('.accordion-text').slideDown("slow");
		$(this).hide();
		$(this).parent().find(".closeAccord").show();
	});

	$(".closeAccord").click(function() {
		$(this).parent().find(".accordion-text").slideUp("slow");
		$(this).hide();
		$(this).parent().find(".openAccord").show();
	});
});
.accord button {
	width: 100%;
	padding: 15px;
	box-sizing:border-box;
	display: block;
	text-align: left;
	cursor: pointer;
	border: none;
	-webkit-appearance: none;
	appearance: none;
}

button.closeAccord {
	display: none;
	background-color: #fec445;
	border: none;
	-webkit-appearance: none;
	appearance: none;
}

.accord h4 {
	font-size: 18px;
	line-height: 18px;
	margin: 0;
	
}

.accordion-text {
	display: none;
	box-sizing: border-box;
	width: 100%;
	padding: 18px;
	background-color: #efefef;
}

h4.open {
	background-image:url(../images/dropdown.png);
	background-repeat: no-repeat;
	background-position: right center;
}

h4.close {
	background-image:url(../images/dropup.png);
	background-repeat: no-repeat;
	background-position: right center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accord">
	<button class="openAccord"><h4 class="open">This is the accordion heading</h4></button>
	<button class="closeAccord"><h4 class="close">This is the accordion heading</h4></button>
	<div class="accordion-text">
		<p>This is the text in the accordion</p>
	</div>
</div>
<div class="accord">
	<button class="openAccord"><h4 class="open">This is the accordion heading</h4></button>
	<button class="closeAccord"><h4 class="close">This is the accordion heading</h4></button>
	<div class="accordion-text">
		<p>This is the text in the accordion</p>
	</div>
</div>
<div class="accord">
	<button class="openAccord"><h4 class="open">This is the accordion heading</h4></button>
	<button class="closeAccord"><h4 class="close">This is the accordion heading</h4></button>
	<div class="accordion-text">
		<p>This is the text in the accordion</p>
	</div>
</div>

答案 3 :(得分：0)

＆＃13;
＆＃13; 
    $(function() {
      'use strict';

      $(".openAccord").click(function() {
        var $accordion = $(this).closest('.accord');
        $accordion.find(".accordion-text").slideDown("slow");
        $accordion.find(".openAccord").hide();
        $accordion.find(".closeAccord").show();
      });

      $(".closeAccord").click(function() {
        var $accordion = $(this).closest('.accord');
        $accordion.find(".accordion-text").slideUp("slow");
        $accordion.find(".closeAccord").hide();
        $accordion.find(".openAccord").show();
      });
    });
＆＃13; 
.accord button {
	width: 100%;
	padding: 15px;
	box-sizing:border-box;
	display: block;
	text-align: left;
	cursor: pointer;
	border: none;
	-webkit-appearance: none;
	appearance: none;
}

button.closeAccord {
	display: none;
	background-color: #fec445;
	border: none;
	-webkit-appearance: none;
	appearance: none;
}

.accord h4 {
	font-size: 18px;
	line-height: 18px;
	margin: 0;
	
}

.accordion-text {
	display: none;
	box-sizing: border-box;
	width: 100%;
	padding: 18px;
	background-color: #efefef;
}

h4.open {
	background-image:url(../images/dropdown.png);
	background-repeat: no-repeat;
	background-position: right center;
}

h4.close {
	background-image:url(../images/dropup.png);
	background-repeat: no-repeat;
	background-position: right center;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="accord">
	<button class="openAccord"><h4 class="open">This is the accordion heading</h4></button>
	<button class="closeAccord">Close accord</button>
	<div class="accordion-text">
		<p>This is the text in the accordion</p>
	</div>
</div>
</div>
<div class="accord">
	<button class="openAccord"><h4 class="open">This is the accordion heading</h4></button>
	<button class="closeAccord">Close accord</button>
	<div class="accordion-text">
		<p>This is the text in the accordion</p>
	</div>
</div>
<div class="accord">
	<button class="openAccord"><h4 class="open">This is the accordion heading</h4></button>
	<button class="closeAccord">Close accord</button>
	<div class="accordion-text">
		<p>This is the text in the accordion</p>
	</div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题