jquery - Accordion 选择的数据无法正常工作

Question

Accordion 大部分工作正常，但选择的背景颜色显示不正确。

请帮助，如何修复它。

	jQuery('.accordion dt').click(function() {
	     jQuery(this).toggleClass('close').closest('dt').next()
	     .slideToggle().siblings('.accordion_content').slideUp();
	});
	jQuery('.accordion_content').hide();

.accordion dt {border-bottom: 1px solid #fff;display: block;cursor: pointer;padding: 8px 12px;color: #404549;font-size:19px;}
.accordion dt .accordion_icon {float: right;}
.accordion dt{background: url(../images/open.png) no-repeat 98% center #e3eaf0;}
.accordion dt:nth-child(4n+1){background-color: #d7e0e7;}
.accordion dt.close{background: url(../images/close.png) #005baa no-repeat 98% center;color:#fff;}
.accordion_content {margin: 0;padding: 15px;}
.accordion dd p{font-size: 14px;line-height: 18px;margin-bottom: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="accordion">
			    
			    <dt>Step 6<i class="open"></i></dt>
			    <dd class="accordion_content">
			    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. </p>
			    </dd>

			    <dt>Step 7<i class="open"></i></dt>
			    <dd class="accordion_content">
			    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. </p>
			    </dd>


			    <dt>Step 8<i class="open"></i></dt>
			    <dd class="accordion_content">
			    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. </p>
			    </dd>

			    <dt>Step 9<i class="open"></i></dt>
			    <dd class="accordion_content">
			    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. </p>
			    </dd>

			    <dt>Step 10<i class="open"></i></dt>
			    <dd class="accordion_content">
			    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. </p>
			    </dd>
			</dl>

Answer 1

您必须从 .siblings() 中删除 .close 类。

jQuery('.accordion_content').hide();
jQuery('.accordion dt').first().toggleClass('close').next().slideToggle();

jQuery('.accordion dt').click(function() {
  jQuery(this).toggleClass('close').next().slideToggle().siblings('.accordion_content').slideUp();
  jQuery(this).siblings().removeClass('close');
});

.accordion dt {
  border-bottom: 1px solid #fff;
  display: block;
  cursor: pointer;
  padding: 8px 12px;
  color: #404549;
  font-size: 19px;
}
.accordion dt .accordion_icon {
  float: right;
}
.accordion dt {
  background: url(../images/open.png) no-repeat 98% center #e3eaf0;
}
.accordion dt:nth-child(4n+1) {
  background-color: #d7e0e7;
}
.accordion dt.close {
  background: url(../images/close.png) #005baa no-repeat 98% center;
  color: #fff;
}
.accordion_content {
  margin: 0;
  padding: 15px;
}
.accordion dd p {
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="accordion">

  <dt>Step 6<i class="open"></i></dt>
  <dd class="accordion_content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit.</p>
  </dd>

  <dt>Step 7<i class="open"></i></dt>
  <dd class="accordion_content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit.</p>
  </dd>


  <dt>Step 8<i class="open"></i></dt>
  <dd class="accordion_content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit.</p>
  </dd>

  <dt>Step 9<i class="open"></i></dt>
  <dd class="accordion_content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit.</p>
  </dd>

  <dt>Step 10<i class="open"></i></dt>
  <dd class="accordion_content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit.</p>
  </dd>
</dl>