Shopify javascript 在 Clic 上關閉手風琴

Question

我正在使用 Archetype Themes Motion v8.0.2 自定義 Shopify 商店。 我找到了將標簽添加到我的產品頁面的代碼。 我已將媒體查詢添加到我的主題。css 以在某些斷點處將選項卡顯示為手風琴。 我想添加代碼以在點擊時關閉手風琴。 我對 HTML/CSS 沒問題，但不知道任何 JS。 我在網上找到了腳本。 任何幫助，將不勝感激！

 $(document).ready(function(){ $('ul.shopify-tabs > li').click(function(){ var tab_id = $(this).attr('data-tab'); $(this).parent().find('li').removeClass('current'); $('.shopify-tab-content').removeClass('current'); $(this).addClass('current'); $("#"+tab_id).addClass('current'); }); })

 .section-tab-head { background: #efefef; color: #333; display: block; padding: 10px 10px; cursor: pointer; margin: 2px; } @media only screen and (min-width: 481px) and (max-width: 768px), (min-width: 1051px) {.section-tab-head { background: none; display: inline-block; margin: inherit; margin-top: 0; } }.section-tab-head.current { background: #dbdbdb; color: #333; }.shopify-tab-content { display: none; background: none; padding: 15px; width: 100%; }.shopify-tab-content > p { font-size: 10pt; font-weight: 400; }.shopify-tab-content.current { display: block; font-size: 10pt; background: white; margin-top: 0px; }.shopify-tab-content > ul { list-style: disc; }.shopify-tab-content > ul ul { list-style: circle; } li, .shopify-tab-content { margin: 10px 0; }.shopify-tabs.shopify-tab-content { float: left; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <ul class="shopify-tabs"> <li class="section-tab-head current" data-tab="section-tab-1"> Heading 1</li> <div id="section-tab-1" class="shopify-tab-content current"> <p>some content goes here</p> </div> <li class="section-tab-head" data-tab="section-tab-2"> Heading 2</li> <div id="section-tab-2" class="shopify-tab-content"> <p>more content in this tab</p> </div> <li class="section-tab-head" data-tab="section-tab-3"> Heading 3</li> <div id="section-tab-3" class="shopify-tab-content"> <p>some content is in list form:</p> <ul> <li>product feature</li> <li>product feature</li> <li>product feature</li> </ul> </div> </ul>

Answer 1

為每個選項卡添加關閉按鈕並添加 jquery 代碼。

$('ul.shopify-tabs > li .close').click(function(){
  $(this).parent().removeClass('current');
});