[英]How can you make multiple toggles for one accordion?
我有一個我正在嘗試創建的產品功能 map。 我能夠讓手風琴工作,但我怎樣才能讓產品圖片上的“+”按鈕也觸發相應的手風琴?
https://jsfiddle.net/rza4hs16/1/
這是我從 jsfiddle 復制的一些代碼:
<div class="accordion-toggle">
<div class="map-container">
<img src="https://i.imgur.com/quhRUKx.jpg" width="500px">
<a id="map-marker-1" class="map-marker" href="#"><i class="fa fa-plus"></i></a>
</div>
<div class="accordion-container">
<div class="set">
<a href="#">
Accordion 1
<i class="fa fa-plus"></i>
</a>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
</div>
</div>
jquery:
$(document).ready(function() {
$(".set > a").on("click", function() {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(this)
.siblings(".content")
.slideUp(200);
$(".set > a i")
.removeClass("fa-minus")
.addClass("fa-plus");
} else {
$(".set > a i")
.removeClass("fa-minus")
.addClass("fa-plus");
$(this)
.find("i")
.removeClass("fa-plus")
.addClass("fa-minus");
$(".set > a").removeClass("active");
$(this).addClass("active");
$(".content").slideUp(200);
$(this)
.siblings(".content")
.slideDown(200);
}
});
});
添加和 ID 到手風琴
<a href="#" id="acc1">
Accordion 1
<i class="fa fa-plus"></i>
</a>
然后,您可以獲得手風琴 object 並從那里從 + 按鈕調用單擊命令
<a id="map-marker-1" class="map-marker" href="#" onclick='$("#acc1").click()'>
這是使用data-
屬性的好機會。 您可以通過這種方式將用戶定義的屬性添加到任何 DOM 元素。
<div class="accordion-toggle">
<div class="map-container">
<img src="https://i.imgur.com/quhRUKx.jpg" width="500px">
<a id="map-marker-1" class="map-marker" href="#" data-feature="1" ><i class="fa fa-plus"></i></a>
</div>
<div class="accordion-container">
<div class="set" data-feature="1" >
<a href="#">
Accordion 1
<i class="fa fa-plus"></i>
</a>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
</div>
</div>
還有你的 JS:
$(".map-marker").click(()=>{
$('.set[data-feature="' + $(this).attr('data-feature') + '"] > a').click();
});
此外,由於最好不要通過模擬事件來觸發代碼,因此最好將手風琴代碼從事件處理程序中移出到單獨的 function 並讓兩個事件處理程序調用它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.