css 针对worpdress / php网站的自定义常见问题解答手风琴
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 针对worpdress / php网站的自定义常见问题解答手风琴相关的知识，希望对你有一定的参考价值。
<div class="faq_accordian">
<div class="row">
<div class="col-md-6 col-sm-6">
<h4 class="menuheader expandable">What are BCAA’s?</h4>
<ul class="categoryitems" style="display: none;">
<li>
<p>Out of nine essential amino acids, BCAA’s (Branched Chain Amino Acid) are three of them: Leucine, Isoleucine and Valine. They are essential because our bodies do not produce them so we need to get them from an outside source. BCAA’s support lean muscle gains, fat loss and quicken recovery times.</p>
</li>
</ul>
<h4 class="menuheader expandable">Does Formulx Natural Recovery have BCAA’s?</h4>
<ul class="categoryitems" style="display: none;">
<li>
<p>Yes! Formulx Natural Recovery has over 5 grams of naturally occurring BCAAs in every serving and is the staple ingredient of Formulx Natural Recovery Whey Protein.</p>
</li>
</ul>
<h4 class="menuheader expandable">What is Formulx Natural Recovery sweetened with?</h4>
<ul class="categoryitems" style="display: none;">
<li>
<p>With no added sugars Formulx Natural Recovery is sweetened with a low dose of Birchwood Xylitol, an organic compound found in many fruits and vegetables, and Stevia directly extracted from the Rebaudioside plant leaves help to maintain an ideal low glycemic response.</p>
</li>
</ul>
<h4 class="menuheader expandable">How is Formulx Natural Recovery made?</h4>
<ul class="categoryitems" style="display: none;">
<li>
<p>Formulx Natural Recovery is produced though a process called micro-filtration or membrane processing which permits concentration and then protein isolation without the use of heat. It is universally known as cold processing. Which helps strip virtually all traces of lactose from the powder, yet maintaining all the vital protein properties and immune boosting qualities. As a result, what yields is a protein with high bioavailability.</p>
</li>
</ul>
<h4 class="menuheader expandable">When is the best time to take Formulx Natural Recovery?</h4>
<ul class="categoryitems" style="display: none;">
<li>
<p>Immediately following your workout.</p>
</li>
</ul>
<h4 class="menuheader expandable">What about on my rest day?</h4>
<ul class="categoryitems" style="display: none;">
<li>
<p>You may take it on non-workout days as a dietary supplement to add high-quality grams of protein to your daily intake. </p>
</li>
</ul>
<h4 class="menuheader expandable">What is Formulx L-Glutamine? Why should I take it?</h4>
<ul class="categoryitems" style="display: none;">
<li>
<p>Formulx L-Glutamine is essential for muscle growth and preventing muscle catabolism. Athletes should be looking to consume over 10g (2 servings) a day, ideally one serving when waking up in the morning and one serving before going to bed at night to promote natural muscle recovery. If you are serious about training and seeing results, we highly recommend mixing in an additional 5 grams of Formulx L-Glutamine into your Formulx Natural Recovery protein shake.</p>
</li>
</ul>
<h4 class="menuheader expandable">What makes Formulx Natural Recovery the best post-workout protein for the intensity-seeking athlete?</h4>
<ul class="categoryitems" style="display: none;">
<li>
<p>Formulx Natural Recovery is made with 100% disease-free, pesticide-free, chemical-free, non-GMO, non-rBGH milk that was derived from New Zealand grass-fed cows. These ruminants were fed grass year round. There are several benefits to consuming grass-fed products. The most pronounced is its saturation of the cancer-fighting fat called conjugated linoleic acid. Grass-fed milk contains up to 2 to 5 times more CLA than milk from grain-fed cattle.</p>
</li>
</ul>
<h4 class="menuheader expandable">Are there any new products in the pipeline? And how can I find out about them?</h4>
<ul class="categoryitems" style="display: none;">
<li>
<p>There sure are. Connect with us on Facebook and Instagram to stay updated.</p>
</li>
</ul>
<h4 class="menuheader expandable">Where can I find Formulx products?</h4>
<ul class="categoryitems" style="display: none;">
<li>
<p>Formulx products can be purchased either directly from our website or at any of our affiliates. Want your box to carry Formulx? Reach out to us on the affiliate page for more information.</p>
</li>
</ul>
</div>
<div class="col-md-6 col-sm-6">
<h4 class="menuheader expandable">Does Formulx sponsor athletes?</h4>
<ul class="categoryitems" style="display: none;">
<li>
<p>Yes</p>
</li>
</ul>
<h4 class="menuheader expandable">Can I send you a testimonial of my experience using your products?</h4>
<ul class="categoryitems" style="display: none;">
<li>
<p>Yes of course! To request a testimonial form, please contact us at info@formulx.com.</p>
</li>
</ul>
<h4 class="menuheader expandable">Is your website secure for online ordering?</h4>
<ul class="categoryitems" style="display: none;">
<li>
<p>Yes. Secure Socket Layer (SSL) encryption is used for every transaction to ensure that your order and information are secure. SSL encrypts the transmissions from our ecommerce servers as well as your computer. SSL encryption works by forming a matched pair with the transmission from your computer transmission and our server, so that only data to and from these sources can be valid.</p>
</li>
</ul>
<h4 class="menuheader expandable">How do I know when my order has been placed?</h4>
<ul class="categoryitems" style="display: none;">
<li>
<p>When your order has been placed you will receive an email confirmation with your order number.</p>
</li>
</ul>
<h4 class="menuheader expandable">How do I know when my order has been shipped?</h4>
<ul class="categoryitems" style="display: none;">
<li>
<p>When your order has been shipped you will receive another email with your tracking number and a link to track the package.</p>
</li>
</ul>
<h4 class="menuheader expandable">How can I change or cancel an existing order?</h4>
<ul class="categoryitems" style="display: none;">
<li>
<p>To cancel or change an order, please contact us at <a href="/cdn-cgi/l/email-protection#eb84998f8e9998ab8d8499869e8793c5888486">customerservice@formulx.com</a>. We will do our absolute best to accommodate your request.</p>
</li>
</ul>
<h4 class="menuheader expandable">When will my order be shipped?</h4>
<ul class="categoryitems" style="display: none;">
<li>
<p>All orders received by 12pm EST will ship the same business day. Orders received after 2pm will ship the next business day. Orders received during weekend and holidays will ship the next business day.</p>
</li>
</ul>
<h4 class="menuheader expandable">What are your shipping fees?</h4>
<ul class="categoryitems" style="display: none;">
<li>
<p>Shipping fees are calculated based off of the shipping zip code entered during the checkout process.</p>
</li>
</ul>
</div>
</div>
<!-- /row --></div><?php
/*
1) include the necessary js files in functions.php
wp_enqueue_script('jquery-ui', '//code.jquery.com/ui/1.11.1/jquery-ui.js', array('jquery'), '1.11.6');
wp_enqueue_script ('ddaccordion_js', get_template_directory_uri() . '/js/ddaccordion.js' ) ;
wp_enqueue_script ('accordion_js', get_template_directory_uri() . '/js/accordion.js' ) ;
2) add the necessary code for the template that will be using this
*/
?>
<div class="container">
<div class="test-container">
<?php
$my_query = new WP_Query('post_type=faq&posts_per_page=100');
$n = 0 ; ?>
<div class="faq_accordian">
<?php while ($my_query->have_posts()) : $my_query->the_post(); $n++; ?>
<div class="col-md-12">
<h4 class="menuheader expandable <?php if($n % 2 == 0) echo 'even'; ?>">
<?php the_title(); ?></span>
</h4>
<ul style="display: none;" class="categoryitems">
<li>
<p class="faq-content"><?php the_content(); ?></p>
</li>
</ul>
</div>
<?php endwhile; wp_reset_query(); ?>
</div>
</div> <!-- test-container -->
</div> <!-- container -->//** Accordion Content script: By Dynamic Drive, at http://www.dynamicdrive.com
//** Created: Jan 7th, 08'. Last updated: June 7th, 2010 to v1.9
//Version 1.9: June 7th, 2010':
//**1) Ajax content support added, so a given header's content can be dynamically fetched from an external file and on demand.
//**2) Optimized script performance by caching header and content container references
var ddaccordion={
ajaxloadingmsg: '<img src="loading2.gif" /><br />Loading Content...', //customize HTML to output while Ajax content is being fetched (if applicable)
headergroup: {}, //object to store corresponding header group based on headerclass value
contentgroup: {}, //object to store corresponding content group based on headerclass value
preloadimages:function($images){
$images.each(function(){
var preloadimage=new Image()
preloadimage.src=this.src
})
},
expandone:function(headerclass, selected){ //PUBLIC function to expand a particular header
this.toggleone(headerclass, selected, "expand")
},
collapseone:function(headerclass, selected){ //PUBLIC function to collapse a particular header
this.toggleone(headerclass, selected, "collapse")
},
expandall:function(headerclass){ //PUBLIC function to expand all headers based on their shared CSS classname
var $headers=this.headergroup[headerclass]
this.contentgroup[headerclass].filter(':hidden').each(function(){
$headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
})
},
collapseall:function(headerclass){ //PUBLIC function to collapse all headers based on their shared CSS classname
var $headers=this.headergroup[headerclass]
this.contentgroup[headerclass].filter(':visible').each(function(){
$headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
})
},
toggleone:function(headerclass, selected, optstate){ //PUBLIC function to expand/ collapse a particular header
var $targetHeader=this.headergroup[headerclass].eq(selected)
var $subcontent=this.contentgroup[headerclass].eq(selected)
if (typeof optstate=="undefined" || optstate=="expand" && $subcontent.is(":hidden") || optstate=="collapse" && $subcontent.is(":visible"))
$targetHeader.trigger("evt_accordion")
},
ajaxloadcontent:function($targetHeader, $targetContent, config, callback){
var ajaxinfo=$targetHeader.data('ajaxinfo')
function handlecontent(content){ //nested function
if (content){ //if ajax content has loaded
ajaxinfo.cacheddata=content //remember ajax content
ajaxinfo.status="cached" //set ajax status to cached
if ($targetContent.queue("fx").length==0){ //if this content isn't currently expanding or collapsing
$targetContent.hide().html(content) //hide loading message, then set sub content's HTML to ajax content
ajaxinfo.status="complete" //set ajax status to complete
callback() //execute callback function- expand this sub content
}
}
if (ajaxinfo.status!="complete"){
setTimeout(function(){handlecontent(ajaxinfo.cacheddata)}, 100) //call handlecontent() again until ajax content has loaded (ajaxinfo.cacheddata contains data)
}
} //end nested function
if (ajaxinfo.status=="none"){ //ajax data hasn't been fetched yet
$targetContent.html(this.ajaxloadingmsg)
$targetContent.slideDown(config.animatespeed)
ajaxinfo.status="loading" //set ajax status to "loading"
$.ajax({
url: ajaxinfo.url, //path to external menu file
error:function(ajaxrequest){
handlecontent('Error fetching content. Server Response: '+ajaxrequest.responseText)
},
success:function(content){
content=(content=="")? " " : content //if returned content is empty, set it to "space" is content no longer returns false/empty (hasn't loaded yet)
handlecontent(content)
}
})
}
else if (ajaxinfo.status=="loading")
handlecontent(ajaxinfo.cacheddata)
},
expandit:function($targetHeader, $targetContent, config, useractivated, directclick, skipanimation){
var ajaxinfo=$targetHeader.data('ajaxinfo')
if (ajaxinfo){ //if this content should be fetched via Ajax
if (ajaxinfo.status=="none" || ajaxinfo.status=="loading")
this.ajaxloadcontent($targetHeader, $targetContent, config, function(){ddaccordion.expandit($targetHeader, $targetContent, config, useractivated, directclick)})
else if (ajaxinfo.status=="cached"){
$targetContent.html(ajaxinfo.cacheddata)
ajaxinfo.cacheddata=null
ajaxinfo.status="complete"
}
}
this.transformHeader($targetHeader, config, "expand")
$targetContent.slideDown(skipanimation? 0 : config.animatespeed, function(){
config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), useractivated)
if (config.postreveal=="gotourl" && directclick){ //if revealtype is "Go to Header URL upon click", and this is a direct click on the header
var targetLink=($targetHeader.is("a"))? $targetHeader.get(0) : $targetHeader.find('a:eq(0)').get(0)
if (targetLink) //if this header is a link
setTimeout(function(){location=targetLink.href}, 200) //ignore link target, as window.open(targetLink, targetLink.target) doesn't work in FF if popup blocker enabled
}
})
},
collapseit:function($targetHeader, $targetContent, config, isuseractivated){
this.transformHeader($targetHeader, config, "collapse")
$targetContent.slideUp(config.animatespeed, function(){config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), isuseractivated)})
},
transformHeader:function($targetHeader, config, state){
$targetHeader.addClass((state=="expand")? config.cssclass.expand : config.cssclass.collapse) //alternate btw "expand" and "collapse" CSS classes
.removeClass((state=="expand")? config.cssclass.collapse : config.cssclass.expand)
if (config.htmlsetting.location=='src'){ //Change header image (assuming header is an image)?
$targetHeader=($targetHeader.is("img"))? $targetHeader : $targetHeader.find('img').eq(0) //Set target to either header itself, or first image within header
$targetHeader.attr('src', (state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) //change header image
}
else if (config.htmlsetting.location=="prefix") //if change "prefix" HTML, locate dynamically added ".accordprefix" span tag and change it
$targetHeader.find('.accordprefix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
else if (config.htmlsetting.location=="suffix")
$targetHeader.find('.accordsuffix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
},
urlparamselect:function(headerclass){
var result=window.location.search.match(new RegExp(headerclass+"=((\\d+)(,(\\d+))*)", "i")) //check for "?headerclass=2,3,4" in URL
if (result!=null)
result=RegExp.$1.split(',')
return result //returns null, [index], or [index1,index2,etc], where index are the desired selected header indices
},
getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},
setCookie:function(name, value){
document.cookie = name + "=" + value + "; path=/"
},
init:function(config){
document.write('<style type="text/css">\n')
document.write('.'+config.contentclass+'{display: none}\n') //generate CSS to hide contents
document.write('a.hiddenajaxlink{display: none}\n') //CSS class to hide ajax link
document.write('<\/style>')
jQuery(document).ready(function($){
ddaccordion.urlparamselect(config.headerclass)
var persistedheaders=ddaccordion.getCookie(config.headerclass)
ddaccordion.headergroup[config.headerclass]=$('.'+config.headerclass) //remember header group for this accordion
ddaccordion.contentgroup[config.headerclass]=$('.'+config.contentclass) //remember content group for this accordion
var $headers=ddaccordion.headergroup[config.headerclass]
var $subcontents=ddaccordion.contentgroup[config.headerclass]
config.cssclass={collapse: config.toggleclass[0], expand: config.toggleclass[1]} //store expand and contract CSS classes as object properties
config.revealtype=config.revealtype || "click"
config.revealtype=config.revealtype.replace(/mouseover/i, "mouseenter")
if (config.revealtype=="clickgo"){
config.postreveal="gotourl" //remember added action
config.revealtype="click" //overwrite revealtype to "click" keyword
}
if (typeof config.togglehtml=="undefined")
config.htmlsetting={location: "none"}
else
config.htmlsetting={location: config.togglehtml[0], collapse: config.togglehtml[1], expand: config.togglehtml[2]} //store HTML settings as object properties
config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //attach custom "oninit" event handler
config.onopenclose=(typeof config.onopenclose=="undefined")? function(){} : config.onopenclose //attach custom "onopenclose" event handler
var lastexpanded={} //object to hold reference to last expanded header and content (jquery objects)
var expandedindices=ddaccordion.urlparamselect(config.headerclass) || ((config.persiststate && persistedheaders!=null)? persistedheaders : config.defaultexpanded)
if (typeof expandedindices=='string') //test for string value (exception is config.defaultexpanded, which is an array)
expandedindices=expandedindices.replace(/c/ig, '').split(',') //transform string value to an array (ie: "c1,c2,c3" becomes [1,2,3]
if (expandedindices.length==1 && expandedindices[0]=="-1") //check for expandedindices value of [-1], indicating persistence is on and no content expanded
expandedindices=[]
if (config["collapseprev"] && expandedindices.length>1) //only allow one content open?
expandedindices=[expandedindices.pop()] //return last array element as an array (for sake of jQuery.inArray())
if (config["onemustopen"] && expandedindices.length==0) //if at least one content should be open at all times and none are, open 1st header
expandedindices=[0]
$headers.each(function(index){ //loop through all headers
var $header=$(this)
if (/(prefix)|(suffix)/i.test(config.htmlsetting.location) && $header.html()!=""){ //add a SPAN element to header depending on user setting and if header is a container tag
$('<span class="accordprefix"></span>').prependTo(this)
$('<span class="accordsuffix"></span>').appendTo(this)
}
$header.attr('headerindex', index+'h') //store position of this header relative to its peers
$subcontents.eq(index).attr('contentindex', index+'c') //store position of this content relative to its peers
var $subcontent=$subcontents.eq(index)
var $hiddenajaxlink=$subcontent.find('a.hiddenajaxlink:eq(0)') //see if this content should be loaded via ajax
if ($hiddenajaxlink.length==1){
$header.data('ajaxinfo', {url:$hiddenajaxlink.attr('href'), cacheddata:null, status:'none'}) //store info about this ajax content inside header
}
var needle=(typeof expandedindices[0]=="number")? index : index+'' //check for data type within expandedindices array- index should match that type
if (jQuery.inArray(needle, expandedindices)!=-1){ //check for headers that should be expanded automatically (convert index to string first)
ddaccordion.expandit($header, $subcontent, config, false, false, !config.animatedefault) //3rd last param sets 'isuseractivated' parameter, 2nd last sets isdirectclick, last sets skipanimation param
lastexpanded={$header:$header, $content:$subcontent}
} //end check
else{
$subcontent.hide()
config.onopenclose($header.get(0), parseInt($header.attr('headerindex')), $subcontent.css('display'), false) //Last Boolean value sets 'isuseractivated' parameter
ddaccordion.transformHeader($header, config, "collapse")
}
})
$headers.bind("evt_accordion", function(e, isdirectclick){ //assign CUSTOM event handler that expands/ contacts a header
var $subcontent=$subcontents.eq(parseInt($(this).attr('headerindex'))) //get subcontent that should be expanded/collapsed
if ($subcontent.css('display')=="none"){
ddaccordion.expandit($(this), $subcontent, config, true, isdirectclick) //2nd last param sets 'isuseractivated' parameter
if (config["collapseprev"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ //collapse previous content?
ddaccordion.collapseit(lastexpanded.$header, lastexpanded.$content, config, true) //Last Boolean value sets 'isuseractivated' parameter
}
lastexpanded={$header:$(this), $content:$subcontent}
}
else if (!config["onemustopen"] || config["onemustopen"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){
ddaccordion.collapseit($(this), $subcontent, config, true) //Last Boolean value sets 'isuseractivated' parameter
}
})
$headers.bind(config.revealtype, function(){
if (config.revealtype=="mouseenter"){
clearTimeout(config.revealdelay)
var headerindex=parseInt($(this).attr("headerindex"))
config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex)}, config.mouseoverdelay || 0)
}
else{
$(this).trigger("evt_accordion", [true]) //last parameter indicates this is a direct click on the header
return false //cancel default click behavior
}
})
$headers.bind("mouseleave", function(){
clearTimeout(config.revealdelay)
})
config.oninit($headers.get(), expandedindices)
$(window).bind('unload', function(){ //clean up and persist on page unload
$headers.unbind()
var expandedindices=[]
$subcontents.filter(':visible').each(function(index){ //get indices of expanded headers
expandedindices.push($(this).attr('contentindex'))
})
if (config.persiststate==true && $headers.length>0){ //persist state?
expandedindices=(expandedindices.length==0)? '-1c' : expandedindices //No contents expanded, indicate that with dummy '-1c' value?
ddaccordion.setCookie(config.headerclass, expandedindices)
}
})
})
}
}
//preload any images defined inside ajaxloadingmsg variable
ddaccordion.preloadimages(jQuery(ddaccordion.ajaxloadingmsg).filter('img'))// JavaScript Document
ddaccordion.init({
headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
}).faq_accordian ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.faq_accordian .menuheader { /* Default BG */
background: url(plus.png) no-repeat scroll right #001749;
cursor: pointer;
margin: 0px 0 0;
padding: 15px 70px 15px 10px;
vertical-align: middle;
font-weight: 400;
color: #fff;
}
h4.menuheader.expandable.even { /* Use different BG than default */
background: url(plus.png) no-repeat scroll right #7E8796;
cursor: pointer;
margin: 0px 0 0;
padding: 15px 70px 15px 10px;
vertical-align: middle;
font-weight: 400;
}以上是关于css 针对worpdress / php网站的自定义常见问题解答手风琴的主要内容，如果未能解决你的问题，请参考以下文章