带有嵌套手风琴菜单的JQuery手风琴菜单

时间：2017-06-14 13:45:13

标签： javascript jquery html css accordion

我正在整理一系列嵌套的手风琴菜单，但似乎当我尝试扩展子菜单时，父菜单会崩溃，然后整个菜单的行为变得混乱。值得注意的是，我已经注释掉（JSFiddle上的第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>

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

如果您真的想使用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/

相关问题
最新问题