文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >带有嵌套手风琴菜单的JQuery手风琴菜单

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

Stack Overflow用户
提问于 2017-06-14 13:45:12
回答 2查看 70关注 0票数 0

我正在整理一系列嵌套的手风琴菜单，但是当我试图展开子菜单时，父菜单就会崩溃，然后整个菜单的行为就会变得混乱。值得注意的是，我已经注释掉了一些嵌套行为(JSFiddle上的CSS第37行)，但我的目标是让所有父菜单默认关闭。

我的代码：

​

代码语言：javascript
复制
$('.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');
  });
});
代码语言：javascript
复制
.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%;
  }
}
代码语言：javascript
复制
<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>

​

javascript
jquery
html
css
accordion
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-06-14 13:52:34

在开始的时候试试这个

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

​

代码语言：javascript
复制
$(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');
    });
});
代码语言：javascript
复制
.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%;
  }
}
代码语言：javascript
复制
<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
EN

Stack Overflow用户

发布于 2017-06-14 14:25:14

如果您真的想使用JQuery UI手风琴，下面是如何做到的：

从css中的..product节删除高度: 0px在html中包括jquery：

代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

然后使用这个javascript：

代码语言：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/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/44546619

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档