Question

我见过很多问题，但没有一个与我的情况类似。我有几个collapse and show的引导div contents。 div content显示单击标题的时间。我想点击其他内容div contents时关闭所有其他title。

title div的颜色为灰色，内容显示时应更改为白色。折叠内容后，title div颜色应恢复为灰色。

这是我的代码：

 

 function collapse (e, id, collapasibleName) {
	var toggleColor = document.getElementById(id);
	var collapsibles = document.getElementById(collapasibleName);
	if(collapsibles.className == 'home__questions-content collapse' || collapsibles.className == 'home__questions-content collapsed') 
	{
		alert("Sdfsdfdsf")
		toggleColor.classList.remove('home__questions-title-show');	
	}

	if(collapsibles.className == 'home__questions-content collapse show') {
		alert("in show")
		toggleColor.classList.add('home__questions-title-show');	
	}
}

.home__more-questions-content {
	padding-right: 40px;
	padding-left:40px;
	padding-bottom: 20px;
	background-color: $white-color;
	position:relative;
	max-width: 1080px;
	margin: auto;
}
 
.home__questions-content-tile {
	margin-bottom: 10px;
	border:1px solid #eee; 
}

.home__questions-content-title {
	padding:20px;
	background-color: #000
	cursor: pointer;
}

.home__questions-content {
	padding-top: 0;
	padding-right:20px;
	padding-left:20px;
	padding-bottom:20px;
}

.home__questions-title-show { background-color: #fff; }

.collapse {
  display:none;
}

.collapse.show {
	display: block;
}
  
.collapsing {
	position: relative;
	height: 0;
	overflow: hidden;
	transition: height 0.35s ease;
}

<div class="home__more-questions-content"  id="accordion">
  <div class="home__questions-content-tile"> 
      <div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-one"	data-parent="#accordion" id="collapse-one" onclick="collapse(event, this.id,'collapsible-one');">
        <h2>
       // title 1 here
        </h2>
    </div>
       <div class="home__questions-content collapse" id="collapsible-one">	
        //title 1's content here
    </div>
  </div>
  <div class="home__questions-content-tile"> 
    <div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-two" data-parent="#accordion" id="collapse-two" onclick="collapse(event, this.id,'collapsible-two');">
        <h2>
        //title 2
        </h2>
    </div>
    <div class="home__questions-content collapse" id="collapsible-two">	

                   //title 2's content here
        </div>
    </div>
     <div class="home__questions-content-tile"> 
        <div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-three" data-parent="#accordion" id="collapse-three" onclick="collapse(event, this.id, 'collapsible-three');">
      <h2>
        //title 3
       </h2>
    </div>
    <div class="home__questions-content collapse" id="collapsible-three">	
             // title 3's content here
    </div>
  </div>
</div>

Answer 1

以下是代码，解释在问题的评论中。

添加新代码

if (e.target.parentNode.classList.contains('active')) {
  e.target.parentNode.classList.remove('active')
  return
}

如果打开当前块，则关闭它并从进一步处理返回。

  const container = document.querySelector('.container')
  container.addEventListener('click', e => {
    if (e.target.parentNode.classList.contains('active')) {
      e.target.parentNode.classList.remove('active')
      return
    }
    const collapsable = document.querySelectorAll('.item')
    Array.prototype.forEach.call(collapsable, el => {
      el.classList.remove('active')
    })
    e.target.parentNode.classList.add('active')
  })

  .container {
    width: 500px;
    margin: 0 auto;
    color:darkslategrey;
  }
  .item {
    margin: 10px 0;
    border-bottom: 1px solid #666;
    padding: 5px 10px;
  }

  .item.active h3 {
    color:aquamarine;
  }

  p {
    overflow: hidden;
    transition: height .5s ease;
    height: 0px;
  }

  .item.active p {
    height: 80px;
  }

  <div class="container">
    <div class="item active">
      <h3>I am a title</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
    </div>
    <div class="item">
      <h3>I am a title</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
    </div>
    <div class="item">
      <h3>I am a title</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
    </div>
  </div>

当一个div打开时，如何设置所有其他div的崩溃？

1 个答案: