javascript - 自定义 jQuery Accordion 样式和图像不起作用

Question

我几乎阅读了 stackoverflow 上关于这个问题的所有帖子，并且真的试图让这件事发生，但它对我来说是行不通的。

我这里有一个 jQuery Accordion [ http://codepen.io/feeko/pen/OyajQN][1]我正在尝试为 h2 提供 #003f72 的背景颜色，白色的文本颜色，并显示 activeHeader 图形。

我想对所有 CSS 执行此操作，而不是在 jQuery 中执行 .css()。

你们都是天才，非常感谢你们的支持，感谢你们帮助我们继续学习。

$(function() {
  
  var icons = {
    header: "defaultIcon",
    activeHeader: "selectedIcon"
  };
  
  $("#accordion").accordion({
    icons: icons,
    collapsible: true,
    heightStyle: "content"
  }); 
});

body {
  width: 50%;
  margin: 0 auto;
}

#accordion .ui-accordion-header {
padding: 6px;
font-weight:500;
}

.group {
    padding: 12px;
}

h3 + p {
    margin-top: -5px;
}

h2 span.text {
  margin-left: 26px;
}

.ui-icon.defaultIcon {
  background: url('http://www.va.gov/osdbu/images/openArrow.png') no-repeat;
  background-size: 20px;
  width: 20px;
  height: 20px;
}

.ui-icon.selectedIcon {
  background-image: url('http://www.va.gov/osdbu/images/closeArrow.png') no-repeat;
  background-size: 20px;
  width: 20px;
  height: 20px;
}

<p>In an effort to assist applicants in obtaining Verification for the Veterans First program, the following Verification Assistance Briefs (VAB) have been provided. The VABs were developed in order to clarify the rules associated with <a href="/osdbu/docs/38CFR74.pdf">38 CFR 74</a>. They are based on analysis of issues that cause the majority of denials.</p>
<div id="accordion">
<h2><span class="text">Eligibility</span></h2>
<div class="group">
<div>
<h3>Applicant Must Meet Small Business Definition</h3>
<p><strong>Issue:</strong> SBA issued a negative size determination against my firm, what happens?&nbsp; OR What must my firm show in order to meet the definition of small for inclusion this program?<br /> <strong>Reviewed:</strong> 11/02/2015 | <a href="#">Download &raquo;</a></p>
</div>
<div>
<h3>Board Governance</h3>
<p><strong>Issue:</strong> Board of Directors governance rules, usually found in Corporate Bylaws, is the number one reason why corporations are found to be ineligible for the Veterans First Procurement Program under Public Law (P.L.) 109-461.<br /> <strong>Reviewed:</strong> 11/02/2015 | <a href="#">Download &raquo;</a></p>
</div>
</div>
<h2><span class="text">Ownership</span></h2>
<div class="group">
<div>
<h3>51% of the Annual Distribution</h3>
<p><strong>Issue:</strong> How can a Veteran owner provide evidence of actual entitlement to receive 51% of the Annual Distribution?<br /> <strong>Reviewed:</strong> 11/02/2015 | <a href="#">Download &raquo;</a></p>
</div>
<div>
<h3>Community Property</h3>
<p><strong>Issue:</strong> How do Veterans in community property states demonstrate ownership and control?<br /> <strong>Reviewed:</strong> 11/02/2015 | <a href="#">Download &raquo;</a></p>
</div>
<div>
<h3>Trusts Brief</h3>
<p><strong>Issue:</strong> How can a firm be eligible in the Veterans First Contracting Program if the Veteran owns the applicant through a trust?<br /> <strong>Reviewed:</strong> 11/02/2015 | <a href="#">Download &raquo;</a></p>
</div>
<div>
<h3>Ownership &ndash; 51% Unconditional</h3>
<p><strong>Issue:</strong> Who does the Center for Verification and Evaluation (CVE) consider to own a Veteran-owned small business?<br /> <strong>Reviewed:</strong> 11/02/2015 | <a href="#">Download &raquo;</a></p>
</div>
<div>
<h3>Transfer of Ownership and Control Within 2 Years Of Application</h3>
<p><strong>Issue:</strong> Transfer of majority ownership or control of the concern from a non-Veteran immediate family member to a Veteran or Service-Disabled Veteran within two years of the application for verification.<br /> <strong>Reviewed:</strong> 11/02/2015 | <a href="#">Download &raquo;</a></p>
</div>
<div>
<h3>Ownership Must Be Direct</h3>
<p><strong>Issue:</strong> The Veteran or service-disabled Veteran owners must own at least 51% of the applicant concern directly.<br /> <strong>Reviewed:</strong> 11/02/2015 | <a href="#">Download &raquo;</a></p>
</div>
<div>
<h3>Unconditional Ownership, Transfer Restrictions</h3>
<p><strong>Issue:</strong> Can there be any restrictions on the veteran owner&rsquo;s ability to transfer ownership of the firm?<br /> <strong>Reviewed:</strong> 11/02/2015 | <a href="#">Download &raquo;</a></p>
</div>
</div>
<h2><span class="text">Control</span></h2>
<div class="group">
<div>
<h3>Control of a Limited Liability Company</h3>
<p><strong>Issue:</strong> How can a Veteran provide evidence of control over a Limited liability Company (LLC)?<br /> <strong>Reviewed:</strong> 11/02/2015 | <a href="#">Download &raquo;</a></p>
</div>
<div>
<h3>Control of Strategic Policy and Day-to-Day Operations</h3>
<p><strong>Issue:</strong> How do Veterans demonstrate Control of Strategic Policy and Day to-Day Operations?<br /> <strong>Reviewed:</strong> 11/02/2015 | <a href="#">Download &raquo;</a></p>
</div>
<div>
<h3>Dependence On Non-Veterans or Entities</h3>
<p><strong>Issue:</strong> What type of business relationship does an applicant need to have with a non-Veteran or entity to avoid CVE determining that the applicant is &ldquo;dependent&rdquo; upon non-Veterans or entities?&nbsp; How is the &ldquo;dependence&rdquo; with other non-Veterans or entities determined?<br /> <strong>Reviewed:</strong> 11/02/2015 | <a href="#">Download &raquo;</a></p>
</div>
<div>
<h3>Full Time Control</h3>
<p><strong>Issue:</strong> Must I work full-time for the applicant firm? Can I hold outside employment?<br /> <strong>Reviewed:</strong> 11/02/2015 | <a href="#">Download &raquo;</a></p>
</div>
<div>
<h3>Highest Compensation</h3>
<p><strong>Issue:</strong> The Veteran or service-disabled Veteran owner must be the highest compensated employee of the applicant, or provide an explanation as to how taking lower compensation is beneficial to the applicant.<br /> <strong>Reviewed:</strong> 11/02/2015 | <a href="#">Download &raquo;</a></p>
</div>
<div>
<h3>Highest Officer</h3>
<p><strong>Issue:</strong> The Veteran or service-disabled Veteran must be the highest ranking officer.<br /> <strong>Reviewed:</strong> 11/02/2015 | <a href="#">Download &raquo;</a></p>
</div>
<div>
<h3>Joint Ventures</h3>
<p><strong>Issue:</strong> How can a Joint Venture be eligible for verification?<br /> <strong>Reviewed:</strong> 11/02/2015 | <a href="#">Download &raquo;</a></p>
</div>
<div>
<h3>Managerial Experience</h3>
<p><strong>Issue:</strong> The Veteran or service-disabled Veteran must have managerial experience of the extent and complexity needed to run the concern.<br /> <strong>Reviewed:</strong> 11/02/2015 | <a href="#">Download &raquo;</a></p>
</div>
<div>
<h3>Operating Agreements</h3>
<p><strong>Issue:</strong> What defines an Operating Agreement and its function?<br /> <strong>Reviewed:</strong> 11/02/2015 | <a href="#">Download &raquo;</a></p>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Answer 1

我不完全确定你在寻找什么，但也许这些是你想要定位的类(class)？

.ui-accordion-header {
  background: #eee url("http://www.va.gov/osdbu/images/openArrow.png") no-repeat 0.5em 0.5em !important;
  color: #555;
  line-height: 4em;
  padding-left: 3.5em !important;
}

.ui-accordion-header.ui-state-active {
  background: #eee url("http://www.va.gov/osdbu/images/closeArrow.png") no-repeat 0.5em 0.5em !important;
  color: #555;
  line-height: 4em;
  padding-left: 3.5em !important;
}

.ui-accordion-header-icon {
  display: none;
}

在这里查看我的演示:http://codepen.io/anon/pen/gaZLWg