0
私はカスタムタブ/アコーディオンをコーディングしましたが、これはうまく機能しますが、アクティブなタブをクリックすると閉じる必要があります。しかし、現在、それは閉じて、再び開きます。jQueryカスタムタブをアクティブにして、同じタブをクリックしてもう一度開きます
アイデア？
$(document).ready(function() {
var originalTabs = $('.originalTabs').html();
var windowWidth = 0;
var swapSpeed = 300;
var scrollSpeed = 200;
function clearTabs() {
$('.originalTabs').html(originalTabs);
}
//clearTabs();
//desktopTabs();
function desktopTabs() {
clearTabs();
// cretate tabs for desktop
var headers = $("#tab_description h6");
$('#tab_description h6').each(function(i) {
$(this).nextUntil("h6").andSelf().wrapAll('<div class="tab" id="tab-' + i + '"/>');
});
for (var i = 0; i < headers.length; i++) {
$('.tabs').append('<li class=""><a href="#tab-' + i + '">' + headers[i].innerHTML + '</a></li>');
}
$('ul.tabs').each(function() {
var active, content, links = $(this).find('a');
var listitem = $(this).find('li');
active = listitem.first().addClass('active');
content = $(active.attr('href'));
$('.tab').hide();
$(this).find('a').click(function(e) {
$('.tab').hide();
$('ul.tabs li').removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.parent().addClass('active');
content.show();
return false;
});
});
headers.remove(); // remove headers from description
$('#tab-0').show(); // show the first tab
}
function mobileTabs() {
clearTabs();
//alert("loaded mobile");
var headers = $("#tab_description h6");
$(headers).each(function(i) {
$(this).append('<a href="#accordion_' + (i + 1) + '" id="accordion_' + (i + 1) + '"></a>');
//$(this).nextUntil("h6").andSelf().wrapAll('<div class="aTab" id="tab-'+i+'"/>');
$(this).on('click tap', function() {
tabClick($(this));
});
});
$('#tab_description h6').first().addClass("active");
$('#tab_description h6').first().nextUntil("h6").show();
}
var tabClick = function(x) {
//alert("clicked");
var accordionContent = $('#tab_description p, #tab_description ul, #tab_description table, #tab_description div');
//$('#tab_description h6').removeClass("active");
if (!$(x).hasClass("active")) {
$(x).addClass("active");
}
// Check if current accordion item is open
var isOpen = $(x).hasClass("active");
//console.log(x);
// Open accordion item if previously closed
if (isOpen) {
$('#tab_description h6').removeClass("active");
$(accordionContent).slideUp(swapSpeed);
$(x).addClass("active");
$(x).nextUntil('h6').slideDown(swapSpeed).promise().then(function() {
scrollToTab($(x));
});
}
return false;
}
function scrollToTab(x) {
$("html, body").animate({
scrollTop: $(x).offset().top - 10
}, scrollSpeed);
}
//load default
$(window).on("load", function() {
mobileTabs();
});
//bind to resize
$(window).on("orientationchange resize", function() {
if (windowWidth != $(window).width()) {
mobileTabs();
$('#tab_description h6').on("click tap", tabClick);
windowWidth = $(window).width();
delete windowWidth;
}
});
});#tab_description p,
#tab_description ul,
[hidden],
template {
display: none
}
#tab_description ul {
list-style-type: circle!important;
padding-left: 20px
}
.tab {
line-height: 23px;
font-size: 14px;
margin-top: 20px
}
@media only screen and (max-width:41.6875em) and (orientation:portrait) {
#tab_description h6 {
cursor: pointer;
margin: 0 0 8px;
font-size: 1.1em;
padding: 10px;
background: #999;
color: #fff;
text-transform: capitalize;
display: block
}
#tab_description h6.active {
background: #333
}
#tab_description h6 span {
line-height: 0!important
}
#tab_description div,
#tab_description p,
#tab_description table,
#tab_description ul {
display: none;
margin: 0;
padding: .5em .5em 1em;
font-size: .9em
}
#tab_description div:first-child,
#tab_description p:first-child,
#tab_description table:first-child,
#tab_description ul:first-child {
display: block
}
#tab_description iframe {
width: 100%
}
#tab_description ul {
margin-left: 20px
}
}
@media only screen and (max-width:41.6875em) and (orientation:landscape) {
#tab_description h6 {
cursor: pointer;
margin: 0 0 8px;
font-size: 1.1em;
padding: 10px;
background: #999;
color: #fff;
text-transform: capitalize
}
#tab_description h6.active {
background: #333
}
#tab_description h6 span {
line-height: 0!important
}
#tab_description div,
#tab_description p,
#tab_description table,
#tab_description ul {
margin: 0;
padding: 1em 0;
font-size: .9em
}
#tab_description iframe {
width: 100%
}
#tab_description ul {
margin-left: 20px
}
}
input,
select {
background: #fff
}
#tab_description .play-button,
#tab_description .video-container,
#tab_description .video-player,
#tab_description div p {
display: block!important
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="originalTabs">
<ul class="tabs">
<!--holder for h6 tabs -->
</ul>
<div id="tab_description">
<h6>Beschreibung</h6>
<p><span>Lass die Seele baumeln während du in dem super gemütlichen ACOUSTIC Sitzsack entspannst. Im Gegensatz zu gewöhnlichen Sitzsäcken hat dieses Exemplar einiges mehr zu bieten. Zwei Füllbereiche erlauben es dir, das Sofa nach Belieben zu füllen. Wir empfehlen eine fest gefüllte Rückseite und einen etwas lockereren Bodenteil. Elastische Bänder im Inneren des Möbels sorgen für eine stabile Form und unterstützen deinen Körper an wichtigen Punkten. Setz dich hin und du willst du so schnell nicht mehr aufstehen. Das elegante Lila ist zudem ein toller optischer Akzent in deinem Wohnzimmer. Kombiniere den Designer-Sitzsack mit unserem Beistelltisch oder unseren Fußkissen und dekoriere dein Zuhause.</span></p>
<h6><span>Stoff</span></h6>
<p><span>Gepolstert im Inneren und super weich auf der Oberfläche – der Stoff ist so bequem wie die Farbe stylisch ist. Das Möbelstück lässt sich mit einer Vielzahl an Farben und Materialien in der Inneneinrichtung kombinieren.</span></p>
<p><strong>40％ Viskose, 60% Polyester, 560 g/m (TC backing)</strong></p>
<h6><span>Ausstattung</span></h6>
<ul>
<li class="ty-product-feature__multiple-item">2 x YKK Reißverschlüsse (sicherheitsverriegelnd & kindergesichert)</li>
<li class="ty-product-feature__multiple-item">Zwei separate Füllbereiche, perfekt für das <em>Funnelweb™</em> Füllsystem</li>
<li class="ty-product-feature__multiple-item">Extra breite Sitzfläche</li>
<li class="ty-product-feature__multiple-item">Kompatibel mit dem <em>Funnelweb™</em> System</li>
<li class="ty-product-feature__multiple-item">Gepolstert</li>
<li class="ty-product-feature__multiple-item"><em>Ambi-Spring</em>-System aus elastischen Bändern im Inneren des Sitzsacks</li>
<li class="ty-product-feature__multiple-item">Ein passendes OTTOMAN™ Fußkissen ist separat erhältlich</li>
<li class="ty-product-feature__multiple-item">Ein passender VERSA TABLE™ Beistelltisch ist separat erhältlich</li>
</ul>
<h6><span style="line-height: 1.4;">Füllung</span></h6>
<p style="text-align: center;"><strong><span>Sieh dir an, wie das <em>Funnelweb</em>™ Zip & Tip System funktioniert.</span></strong></p>
<p style="text-align: center;"><iframe width="560" height="315" src="https://www.youtube.com/embed/3O37-eLpJQY" frameborder="0" allowfullscreen=""></iframe></p>
<p><strong>Um das ACOUSTIC Sofa zu füllen,</strong> empfehlen wir ca. 300lt unserer <em>PremierBead</em>™ Füllung. Die individuell optimale Füllmenge hängt aber auch von Deinem persönlichem Komfortempfinden ab. Grundlegend kann man sagen: Füll' die Rückseite
eher üppig, damit das Sofa nachher stabil am Boden steht. Den Bodenteil kannst Du dann, nach Belieben, auch weniger fest füllen. Umso weniger Füllung, umso weicher die Sitzfläche.</p>
<p><span><strong>1. Schritt: </strong>Nimm' dir den Bezug und öffne die Rückseite. (mit Hilfe des mitgelieferten Reißverschluss-Öffners oder einer Büroklammer) Bring das <em>Funnelweb</em> an den Reißverschlüssen des Bezugs an. Wenn Bezug und Füllbeutel korrekt verbunden sind, hebe den Füllbeutel und lass die Kügelchen in den Bezug fallen. Währenddessen kannst du durch leichtes Bewegen und Schütteln der Komponenten etwas nachhelfen. Dadurch gelangen die Kügelchen durch die gesamte Struktur im Inneren. Wenn die Rückseite voll genug ist, entferne den Füllbeutel vorsichtig. Schieße den weißen Reißverschluss am Bezug und stecke ihn in den Bezug. Danach, schließe den Reißverschluss des Bezugs. Die Rückseite sollte nun fest und stabil sein.</span></p>
<p><span><strong>2. Schritt:</strong> Wiederhole die Prozedur aus Schritt 1 für den Bodenteil. Achte darauf, den Sitzteil nicht so fest wie die Rückseite zu füllen. (ca. 80%) Probier' zwischendurch, durch Fühlen und Sitzen, ob die Sitzfläche deinen Komfortansprüchen genügt.</span></p>
<h6><span>Pflege</span></h6>
<p>Unsere Indoor-Stoffe haben eine sehr hohe Qualität und sind darauf ausgelegt, lange zu bestehen. Es folgen einige unkomplizierte <strong>Pflegetipps</strong>, um die Langlebigkeit der Möbel zu fördern.</p>
<p>Sollten sich einzelne Fäden lösen, schneide sie ab. Nicht daran ziehen! Staub kann man am besten mit einem Staubsauger mit geeignetem Aufsatz entfernen. Benutze keine groben Bürsten und vermeide generell scharfe und spitze Objekte, beim Umgang mit
dem Stoff. Um ein Verblassen der Farbe zu vermeiden, ist es empfehlenswert, den Sessel nicht zu langem direktem Sonnenlicht auszusetzen. Aus Sicherheitsgründen sollte das Möbelstück mindestens 50cm von jeglichen Hitzequellen entfernt stehen. Innerhalb
der ersten 3-6 Monate werden die Kügelchen im Inneren natürlicherweise etwas zusammengedrückt, weshalb eine kleine Nachladung notwendig sein kann. Deshalb solltest du die übrig gebliebenen Kügelchen stets im Füllbeutel aufheben. Arm- und Rückenlehne
sind nicht zum darauf sitzen designt, weshalb man sich, auch wenn es manchmal schwerfällt, konventionell auf die Sitzfläche setzen sollte. Damit dein Beanbag immer gut aussieht, solltest du ihn nach Gebrauch etwas aufschütteln, damit er ein seine
ursprüngliche Gestallt zurückkehrt. </p>
<p><strong>Reinigung & Wäsche:</strong></p>
<p>Gute Nachricht: Alle unsere Indoor-Stoffe sind waschmaschinenfest und handwaschbar in kaltem und lauwarmen Wasser. Trocknen aber bitte nur an der Leine! "Gieße" die Kügelchen vor der Wäsche per <em>Funnelweb™</em>-System zurück in den Füllbeutel.
Kleine Flecken empfiehlt es sich stelltenweise per Hand, mit Hilfe eines professionellen Reinigungssets zu behandeln. Die Anwendung eines Pflegemittels, wie dem <em>3M Scotchgard,</em> ist auch niemals verkehrt.<br /><strong></strong></p>
<p><strong>Garantie und Reparaturen: </strong></p>
<p>Wie überall im Leben können auch hier hin und wieder Probleme auftreten. Wenn sich, bei angemessener Anwendung und innerhalb eines angemessenen Zeitraums, der Saum löst oder Risse auftreten, kontaktiere unser Team in Köln. Sende und eine E-Mail, am
besten mit Fotos des Schadens, an [email protected] oder rufe uns unter 015231085279 an. Die meisten kleinen Schäden sind erfahrungsgemäß schnell behoben. </p>
<p>Viel Spaß mit deinem Ambient Lounge®!</p>
<h6>Maße</h6>
<p style="text-align: left;"><img style="margin-right: auto; margin-left: auto; float: none; display: block;" alt="" src="//cdn.shopify.com/s/files/1/1174/5686/files/ambient-lounge-acoustic-dimensions_medium.jpg?17255928396919968517" /></p>
<p style="text-align: center;"><strong>W</strong>: 80cm | <b>B</b>: 80cm | <b>T</b>: 80cm | Gewicht (Bezug): 3.7kg</p>
<div id="spoon-plugin-kncgbdglledmjmpnikebkagnchfdehbm-2" style="display: none;"></div>
</div>
</div>
おかげで、私はただの遊びや問題のカップルを持っていた...それはアクティブなクラスを削除しませんが、より重要なのは、あなたがそれを閉じた場合、あなたは再びそれを開くことができません。..私が何を意味するか見てみましょうか？ – James
@James問題を修正します。更新されたコードを参照してください。 –
もう一度試してみましたが、修正されているかどうかわかりません...同じタブをクリックすると閉じますが、ゲインをクリックして開くと表示されません。 – James