手風琴+/-內容字符串標記不起作用
[英]Accordion +/- content string markers not working
問題描述
找到一個JavaScript手風琴示例，該示例滿足了我的要求（打開基於href的主手風琴）的90％，並對其進行了修改，以基本上在右側添加了“ more info +”和“ less info-”內容標記的子手風琴級別。僅通過顯式單擊打開和關閉（不會在手風琴之間自動關閉）。
用法將有多個並行的子手風琴，但沒有進一步的子嵌套。 雖然各種手風琴中的文本可以正確打開和關閉，但手風琴內容標記的作用並不理想。
對於單個子手風琴，單擊打開可將標記切換為“少-”，並顯示部分，但是在單擊關閉動作時，該部分將關閉，但標記不會切換回原始的“更多信息+”狀態。 當多個子手風琴然后按上述方式工作時，特定子手風琴的單擊關閉會關閉手風琴，但是，標記保持在“較少信息-”狀態（如上），文本會關閉，但上方的手風琴首先處於打開狀態“較少信息-”狀態僅將標記切換為“更多信息+”狀態（數據保持打開狀態）。
子手風琴需要彼此獨立操作，並且標記必須正確切換，但我不了解我所缺少的內容。
由於我只會有3-4個最大的平行子手風琴，因此我嘗試創建編號重復的子手風琴，使它們獨立，這是解決“交叉手風琴泄漏”的一種有效方法。 因此，如果我可以使標記正常工作，那么我可以忍受這種hack。
我的代碼...
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
// Hide all panels
$(".subpanel").hide();
// Show first panel by default
$(".mainaccordion:eq(0)").next(".subpanel").show();
$(".mainaccordion:first").addClass("active");
// Get hash from query string
var hash = window.location.hash;
if (hash) {
// Get panel header element
var requestedPanel = $(hash);
if (requestedPanel.length) {
// Hide all panels
$(".subpanel").hide();
$('.mainaccordion').removeClass("active"); // remove active
// Show requested panel
requestedPanel.next(".subpanel").show();
requestedPanel.addClass("active"); //add active
}
};
$('body').find('.mainaccordion').click(function() {
//Expand or collapse this panel
$(this).next().slideToggle('300');
$('.mainaccordion').removeClass("active"); // remove active
$(this).addClass("active"); // add active
//Hide the other panels
$(".subpanel").not($(this).next()).slideUp('fast');
});
$('body').find('.subpanelaccordion').click(function() {
//Expand or collapse this panel
$(this).next().slideToggle('300');
$('.subpanelaccordion').removeClass("active"); // remove active
$(this).addClass("active"); // add active
});
$('body').find('.subpanelaccordion1').click(function() {
//Expand or collapse this panel
$(this).next().slideToggle('300');
$('.subpanelaccordion1').removeClass("active"); // remove active
$(this).addClass("active"); // add active
});
});
</script>
<style>
.mainaccordion {margin-left: 20px; cursor: pointer;}
.subpanelaccordion { cursor: pointer;}
.subpanelaccordion:after { cursor: pointer; margin-left: 24px; color: #0000FF ; font-weight: bold; font-style: italic; content: "(more info \02795 )";}
.subpanelaccordion.active:after { content: "(less info \2796 )";}
.subpanel {margin-left: 40px; display: none;}
.subpanelsubpanel {display: none;}
.mainaccordion.active + .accordion-content { display: block; }
.subpanelaccordion.active + .accordion-content { display: block; }
.smallbold {font-weight:bold;font-size:85%}
</style>
</head>
<body>
<div id="accordion">
<h4 class="mainaccordion" id="q1">Lorem ipsum dolor sit amet mauris eu turpis</h4>
<div class="subpanel"><p>Select chapter to view.</p></div>
<h4 class="mainaccordion" id="AAAA">Chapter AAAA</h4>
<div class="subpanel"><p>Lorem ipsum dolor sit amet mauris eu turpis. <a href="#BBBB" onclick="setTimeout('history.go(0);',300);">Open BBBB.</a></p></div>
<h4 class="mainaccordion" id="BBBB">Chapter BBBB</h4>
<div class="subpanel"><p >Vivamus facilisisnibh scelerisque laoreet.
<div class="subpanelaccordion">Lorem ipsum dolor sit amet mauris eu turpis: item 1.</div>
<div class="subpanelsubpanel"><ul>
<li><span class=smallbold>For a1,</span> the value is foo.</li>
<li><span class=smallbold>For a2,</span> the value is foo.</li>
</ul></div>
<p></p>
<div class="subpanelaccordion">Lorem ipsum dolor sit amet mauris eu turpis: item 2.</div>
<div class="subpanelsubpanel"><ul>
<li><span class=smallbold>For a1,</span> the value is foo.</li>
<li><span class=smallbold>For a2,</span> the value is foo.</li>
</ul></div>
<p></p>
<div class="subpanelaccordion">Lorem ipsum dolor sit amet mauris eu turpis: item 3.</div>
<div class="subpanelsubpanel"><ul>
<li><span class=smallbold>For a1,</span> the value is foo.</li>
<li><span class=smallbold>For a2,</span> the value is foo.</li>
</ul></div>
</p>
</div>
<h4 class="mainaccordion" id="DDDD">Chapter DDDD</h4>
<div class="subpanel"><p class=margin40>Vivamus facilisisnibh scelerisque laoreet.</p></div>
</div></body>
</html>
1 個解決方案
解決方案1
0 已采納 2017-09-05 18:43:00
您可以嘗試這樣做：這是您想要組成的第二個手風琴，
$('body').find('.subpanelaccordion').click(function() {
//Expand or collapse this panel
$(this).next().slideToggle('300');
if($(this).hasClass('active')){ //Here we check if elemnet has active class already the remove it otherwise add to it.
$(this).removeClass("active");
// remove active
}
else{
$(this).addClass("active"); // add active
}
});
jQuery手風琴heighstyle：內容或填充不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.