搜索
搜索

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

debugcn 发表于 Dev
18
克里斯

我正在将一系列嵌套的手风琴菜单放在一起，但似乎当我尝试展开子菜单时，父菜单会折叠，然后整个菜单的行为就会失控。值得注意的是，我已经注释掉（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>

尼丁·钱德兰

一开始就试试这个

$(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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

带有嵌套的jQuery手风琴菜单

来自分类Dev

jQuery通过URL扩展嵌套手风琴菜单

来自分类Dev

将菜单添加到jQuery手风琴

来自分类Dev

关闭打开子菜单-jQuery手风琴

来自分类Dev

jQuery手风琴菜单活动打开

来自分类Dev

jQuery手风琴菜单（3级）如何？

来自分类Dev

手风琴菜单上的jQuery dotdotdot

来自分类Dev

jQuery手风琴菜单中某些元素滞后

来自分类Dev

自定义手风琴菜单，jQuery

来自分类Dev

jQuery手风琴菜单活动打开

来自分类Dev

jQuery子菜单手风琴

来自分类Dev

手风琴Jquery多菜单导航

来自分类Dev

jQuery手风琴菜单，使标题超链接

来自分类Dev

调整手风琴菜单的大小jQuery

来自分类Dev

创建jQuery手风琴菜单的更好方法？

来自分类Dev

如何制作活动的 jQuery 手风琴菜单？

来自分类Dev

手风琴菜单如何使所有类别扩展？-jQuery Accordeon菜单

来自分类Dev

带有 jquery 的 css 手风琴

来自分类Dev

将Jquery手风琴转换为嵌套手风琴

来自分类Dev

刷新后需要一个活动子菜单（jQuery手风琴菜单）

来自分类Dev

jQuery手风琴默认扩展

来自分类Dev

jQuery手风琴问题

来自分类Dev

jQuery简单手风琴

来自分类Dev

关闭动画Jquery手风琴

来自分类Dev

jQuery从链接打开手风琴

来自分类Dev

jQuery Ui手风琴

来自分类Dev

手风琴jQuery崩溃了onClick

来自分类Dev

jQuery手风琴头索引

来自分类Dev

jQuery UI手风琴控件

Related 相关文章

  1. 1

    带有嵌套的jQuery手风琴菜单

  2. 2

    jQuery通过URL扩展嵌套手风琴菜单

  3. 3

    将菜单添加到jQuery手风琴

  4. 4

    关闭打开子菜单-jQuery手风琴

  5. 5

    jQuery手风琴菜单活动打开

  6. 6

    jQuery手风琴菜单（3级）如何？

  7. 7

    手风琴菜单上的jQuery dotdotdot

  8. 8

    jQuery手风琴菜单中某些元素滞后

  9. 9

    自定义手风琴菜单，jQuery

  10. 10

    jQuery手风琴菜单活动打开

  11. 11

    jQuery子菜单手风琴

  12. 12

    手风琴Jquery多菜单导航

  13. 13

    jQuery手风琴菜单，使标题超链接

  14. 14

    调整手风琴菜单的大小jQuery

  15. 15

    创建jQuery手风琴菜单的更好方法？

  16. 16

    如何制作活动的 jQuery 手风琴菜单？

  17. 17

    手风琴菜单如何使所有类别扩展？-jQuery Accordeon菜单

  18. 18

    带有 jquery 的 css 手风琴

  19. 19

    将Jquery手风琴转换为嵌套手风琴

  20. 20

    刷新后需要一个活动子菜单（jQuery手风琴菜单）

  21. 21

    jQuery手风琴默认扩展

  22. 22

    jQuery手风琴问题

  23. 23

    jQuery简单手风琴

  24. 24

    关闭动画Jquery手风琴

  25. 25

    jQuery从链接打开手风琴

  26. 26

    jQuery Ui手风琴

  27. 27

    手风琴jQuery崩溃了onClick

  28. 28

    jQuery手风琴头索引

  29. 29

    jQuery UI手风琴控件

热门标签

归档