如何划分四个象限中的部分+在可折叠列表框中进行点击，与部分中的点击无关

Question

描述/方法

我正在尝试合并两支钢笔：

https://codepen.io/ramsaylanier/pen/xcdiq?q=section&limit=all&type=type-pens

和

https://codepen.io/jasonpaul/pen/NxjvjW?q=collapse&order=popularity&depth=everything&show_forks=false

理想情况下，我想让这四个部分以象限形式出现（第一行有两个部分，底行有两个部分）。每个部分都应该有一个可折叠的列表框。当用户点击列表框时，该部分也不应该展开。列表框和该部分中的点击应该是独立的。

关于点击次数，我认为我必须告诉toggleClass忽略.collapsible点击次数。不确定如何。

    $('.section').on('click', function(){
  $(this).toggleClass('expanded');
})

  $(".collapsible").collapsible({accordion: true});
  $(".collapsible").collapsible({accordion: false});

代码

https://codepen.io/szeconku/pen/oqBPvO

我需要弄清楚如何在列表框中进行点击，而不依赖于部分中的点击次数以及如何添加第二行。任何帮助表示赞赏。

Answer 1

Codepen已更新：https://codepen.io/anon/pen/oqBrbq

.section {
  background-size: cover;
  position: absolute;
  height: calc( 50% - 2px);
  width: 50vw;
  overflow: hidden;
  /*@include skew(-10deg, 0deg);*/
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -webkit-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  border-left: 2px solid white;
  border-right: 2px solid white;
  cursor: pointer;
}
.section::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background-color: #3498DB;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  -webkit-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
.section::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -15%;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 130%;
  height: 100%;
  opacity: 0.3;
  z-index: -1;
  -moz-transform: skew(10deg, 0deg);
  -ms-transform: skew(10deg, 0deg);
  -webkit-transform: skew(10deg, 0deg);
  transform: skew(10deg, 0deg);
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -webkit-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  overflow: hidden;
}
.section:hover {
  width: 47%;
  z-index: 30;
}
.section:hover::after {
  background-size: 50%;
}
.section:hover:last-of-type {
  left: 53%;
}
.section.expanded {
  width: 100% !important;
  left: 0px;
  height: 100%;
  z-index: 100;
  -moz-transform: skew(0deg, 0deg);
  -ms-transform: skew(0deg, 0deg);
  -webkit-transform: skew(0deg, 0deg);
  transform: skew(0deg, 0deg);
}
.section.expanded::after {
  -moz-transform: skew(0deg, 0deg);
  -ms-transform: skew(0deg, 0deg);
  -webkit-transform: skew(0deg, 0deg);
  transform: skew(0deg, 0deg);
  background-size: 50%;
  background-position: left;
}
.section.expanded:hover:last-of-type {
  left: 0px;
}
.section.expanded:hover::after {
  background-size: 50%;
  background-position: left;
}

.section-1 {
  left: 0;
  top: 0;
}
.section-1::before {
  background-color: #1DB45D;
}

.section-2 {
  left: 50%;
  top: 0;
}
.section-2::before {
  background-color: #3498DB;
}

.section-3 {
  left: 0;
  bottom: 0;
}
.section-3::before {
  background-color: #9B59B6;
}

.section-4 {
  left: 50%;
  bottom: 0;
}
.section-4::before {
  background-color: #F06D3A;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <section class="section-1 section">
    <h1>Title 1</h1>
    <div class="container">
      <ul class="collapsible" data-collapsible="expandable">
        <li>
          <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Bullet 1</div>
          <div class="collapsible-body">
            <p>Bullet 1 text</div>
      </ul>
    </div>
  </section>
  <section class="section-2 section">
    <h1>Title 2</h1>
  </section>
  <section class="section-3 section">
    <h1>Title 3</h1>
  </section>
  <section class="section-4 section">
    <h1>Title 4</h1>
  </section>
</div>

def insert_proc(self, cur1):
  self.cur2.execute("INSERT INTO 20091229global (proddate, site, plant, unit, line, pid, mods) \
                        VALUES ('%s', '%s', '%s', '%s', '%s', '%s', '%s', '%s')"
                        % self.cur1.fetchone())