自定义jQuery手风琴样式和图像不起作用

Custom jQuery accordion styling and images not working

本文关键字:图像 不起作用 样式 jQuery 手风琴 自定义      更新时间:2023-09-26

我几乎读过stackoverflow上关于这个问题的每一篇帖子,并真的试图实现这一点,但这对我的一生来说都不是。

我这里有一个jQuery手风琴[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>

我不完全确定你想要什么,但也许这些就是你想要的类?

.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