javascript - 如何在四个象限中划分部分+在独立于部分点击的可折叠列表框中进行点击

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').on('click', function(e){
  $(this).toggleClass('expanded');
})


  $(".collapsible").collapsible({accordion: true});
  $(".collapsible").click(function(e){
      e.stopPropagation();
  });

.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>