帶有嵌套手風琴菜單的JQuery手風琴菜單

Question

我將一系列嵌套的手風琴菜單放在一起，但是當我嘗試擴展子菜單時，父菜單將折疊，然后整個菜單的行為變得混亂。 值得注意的是，我已經注釋掉（JSFiddle上CSS的第37行）以測試某些嵌套行為，但是我的預期狀態是所有父菜單都默認關閉。

我的代碼：

 $('.product-title').hover(function() { $(this).toggleClass('hover'); }); var lastItem; $('.product-title').click(function(currentItem) { var currentItem = $(this); if ($(this).next().height() == 0) { $(lastItem).css({ 'font-weight': 'normal' }); $(lastItem).next().animate({ height: '0px' }, 400, 'swing'); $(this).css({ 'font-weight': 'bold' }); $(this).next().animate({ height: '100%', opacity: 1 }, 400, 'swing'); } else { $(this).next().animate({ height: '0px', opacity: 1 }, 400, 'swing'); } lastItem = $(this); }); $(function() { $('.product-title').click(function() { $(this).find('i').toggleClass('plus-KO minus-KO'); }); }); $('.product-name').hover(function() { $(this).toggleClass('hover'); }); var lastItem; $('.product-name').click(function(currentItem) { var currentItem = $(this); if ($(this).next().height() == 0) { $(lastItem).css({ 'font-weight': 'normal' }); $(lastItem).next().animate({ height: '0px' }, 400, 'swing'); $(this).next().animate({ height: '100%', opacity: 1 }, 400, 'swing'); } else { $(this).css({ 'font-weight': 'normal' }); $(this).next().animate({ height: '0px', opacity: 1 }, 400, 'swing'); } lastItem = $(this); }); $(function() { $('.product-name').click(function() { $(this).find('i').toggleClass('plus minus'); }); }); 

 .product { margin-bottom: 10px; overflow: hidden; } .product-block { float: left; width: 100%; padding-bottom: 10px; } .product-title { font-family: "Arial", Arial, sans-serif; font-size: 1.8em; background-color: #07457e; color: #FFFFFF; padding: 4px 4px 4px 10px; border: solid 1px #07457e; font-weight: 700; } .product-name { font-family: "Arial", Arial, sans-serif; font-size: 12pt; color: #737373; line-height: 30px; padding: 0 5px; overflow: hidden; } .product-title:hover { background-color: silver !important; cursor: pointer; } .product-name:hover { background-color: silver !important; cursor: pointer; } .product-section { display: block; /*height: 0px;*/ overflow: hidden; } .product-desc { font-family: "Arial", Arial, sans-serif; color: #737373; height: 0px; padding: 0 3px; overflow: hidden; display: block; border-bottom: 2px solid #07457e; } .product-desc p { font-family: "Arial", Arial, sans-serif; font-size: 10pt; text-align: justify; margin: 0px; margin-bottom: 2px; padding: 0px; } .item-length { width: 50px; float: left; overflow: hidden; } .item-length p { font-weight: bold; } .device-length { width: 25%; float: left; overflow: hidden; } .item-number { width: auto; float: left; overflow: hidden; } .item-padding { margin: 5px; overflow: hidden; } .product-feature { float: right; width: auto; } .product-key { padding: 0 5px; } .product-key p { font-family: "Arial", Arial, sans-serif; font-size: 9pt; color: #07457e; font-weight: bold; line-height: 160%; margin: 0px; padding: 0px; } .plus-KO:before { content: "+"; font-weight: bold; color: #FFFFFF; } .minus-KO:before { content: "\\2013"; font-weight: bold; color: #FFFFFF; } .plus:before { content: "+"; font-weight: bold; color: #07457e; } .minus:before { content: "\\2013"; font-weight: bold; color: #07457e; } @media screen and (max-width: 767px) { /* menu table visibility set by screen width */ .device-length { width: 50%; } } @media screen and (max-width: 499px) { /* menu table visibility set by screen width */ .device-length { width: 100%; } } 

 <div class="product"> <div class="product-block"> <div class="product-title"><i class="plus-KO"></i>&ensp;Product title</div> <div class="product-section"> <div class="product-key"> <p>Product subtitle</p> </div> <div class="product-name"><i class="plus"></i>&ensp;Product name</div> <div class="product-desc"> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> </div> <div class="product-name"><i class="plus"></i>&ensp;Product name</div> <div class="product-desc"> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> </div> <div class="product-name"><i class="plus"></i>&ensp;Product name</div> <div class="product-desc"> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> </div> </div> </div> </div> <div class="product"> <div class="product-block"> <div class="product-title"><i class="plus-KO"></i>&ensp;Product title</div> <div class="product-section"> <div class="product-key"> <p>roduct subtitle</p> </div> <div class="product-name"><i class="plus"></i>&ensp;Product name</div> <div class="product-desc"> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> </div> <div class="product-name"><i class="plus"></i>&ensp;Product name</div> <div class="product-desc"> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> </div> <div class="product-name"><i class="plus"></i>&ensp;Product name</div> <div class="product-desc"> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> </div> </div> </div> </div> 

Answer 1

一開始嘗試

$(document).ready(function(){ $('.product-section').css('height',0); });

 $(document).ready(function(){ $('.product-section').css('height',0); }); $('.product-title').hover(function() { $(this).toggleClass('hover'); }); var lastItem; $('.product-title').click(function(currentItem) { var currentItem = $(this); if ($(this).next().height() == 0) { $(lastItem).css({'font-weight':'normal'}); $(lastItem).next().animate({height: '0px'},400,'swing'); $(this).css({'font-weight':'bold'}); $(this).next().animate({height: '100%',opacity: 1},400,'swing'); } else { $(this).next().animate({height: '0px',opacity: 1},400,'swing'); } lastItem = $(this); }); $(function() { $('.product-title').click(function() { $(this).find('i').toggleClass('plus-KO minus-KO'); }); }); $('.product-name').hover(function() { $(this).toggleClass('hover'); }); var lastItem; $('.product-name').click(function(currentItem) { var currentItem = $(this); if ($(this).next('.product-desc').height() == 0) { $(lastItem).css({'font-weight':'normal'}); $(lastItem).next('.product-desc').animate({height: '0px'},400,'swing'); $(this).next('.product-desc').animate({height: '100%',opacity: 1},400,'swing'); } else { $(this).css({'font-weight':'normal'}); $(this).next('.product-desc').animate({height: '0px',opacity: 1},400,'swing'); } lastItem = $(this); }); $(function() { $('.product-name').click(function() { $(this).find('i').toggleClass('plus minus'); }); }); 

 .product { margin-bottom: 10px; overflow: hidden; } .product-block { float: left; width: 100%; padding-bottom: 10px; } .product-title { font-family: "Arial", Arial, sans-serif; font-size: 1.8em; background-color: #07457e; color: #FFFFFF; padding: 4px 4px 4px 10px; border: solid 1px #07457e; font-weight: 700; } .product-name { font-family: "Arial", Arial, sans-serif; font-size: 12pt; color: #737373; line-height: 30px; padding: 0 5px; overflow: hidden; } .product-title:hover { background-color: silver !important; cursor: pointer; } .product-name:hover { background-color: silver !important; cursor: pointer; } .product-section { display: block; /*height: 0px;*/ overflow: hidden; } .product-desc { font-family: "Arial", Arial, sans-serif; color: #737373; height: 0px; padding: 0 3px; overflow: hidden; display: block; border-bottom: 2px solid #07457e; } .product-desc p { font-family: "Arial", Arial, sans-serif; font-size: 10pt; text-align: justify; margin: 0px; margin-bottom: 2px; padding: 0px; } .item-length { width: 50px; float: left; overflow: hidden; } .item-length p { font-weight: bold; } .device-length { width: 25%; float: left; overflow: hidden; } .item-number { width: auto; float: left; overflow: hidden; } .item-padding { margin: 5px; overflow: hidden; } .product-feature { float: right; width: auto; } .product-key { padding: 0 5px; } .product-key p { font-family: "Arial", Arial, sans-serif; font-size: 9pt; color: #07457e; font-weight: bold; line-height: 160%; margin: 0px; padding: 0px; } .plus-KO:before { content: "+"; font-weight: bold; color: #FFFFFF; } .minus-KO:before { content: "\\2013"; font-weight: bold; color: #FFFFFF; } .plus:before { content: "+"; font-weight: bold; color: #07457e; } .minus:before { content: "\\2013"; font-weight: bold; color: #07457e; } @media screen and (max-width: 767px) { /* menu table visibility set by screen width */ .device-length { width: 50%; } } @media screen and (max-width: 499px) { /* menu table visibility set by screen width */ .device-length { width: 100%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="product"> <div class="product-block"> <div class="product-title"><i class="plus-KO"></i>&ensp;Product title</div> <div class="product-section"> <div class="product-key"> <p>Product subtitle</p> </div> <div class="product-name"><i class="plus"></i>&ensp;Product name</div> <div class="product-desc"> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> </div> <div class="product-name"><i class="plus"></i>&ensp;Product name</div> <div class="product-desc"> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> </div> <div class="product-name"><i class="plus"></i>&ensp;Product name</div> <div class="product-desc"> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> </div> </div> </div> </div> <div class="product"> <div class="product-block"> <div class="product-title"><i class="plus-KO"></i>&ensp;Product title</div> <div class="product-section"> <div class="product-key"> <p>roduct subtitle</p> </div> <div class="product-name"><i class="plus"></i>&ensp;Product name</div> <div class="product-desc"> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> </div> <div class="product-name"><i class="plus"></i>&ensp;Product name</div> <div class="product-desc"> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> </div> <div class="product-name"><i class="plus"></i>&ensp;Product name</div> <div class="product-desc"> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> <div class="device-length"> <div class="item-padding"> <div class="item-length"> <p>Size</p> </div> <div class="item-number"> <p>Item number</p> </div> </div> </div> </div> </div> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

如果您真的想使用JQuery UI Accordion，請按以下步驟操作：

從CSS的.product-section中刪除高度：0px，在HTML中包含jquery ui：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

然后使用此javascript：

$(function(){
    $(".product-block").accordion({
        header:'.product-title',
    icons: {
                    header: "plus-KO",
                    activeHeader: "minus-KO"
    },
        heightStyle: 'content',
    collapsible: true,
        active: false
    });
  $(".product-section").accordion({
        header:'.product-name',
    icons: {
                    header: "plus",
                    activeHeader: "minus"
    },
    heightStyle: 'content',
    collapsible: true,
        active: false
    });
});

我從+類別的html中刪除了圖標，因為jquery手風琴也提供了圖標功能。

https://jsfiddle.net/jLqcoys2/