我正在实现垂直切换面板但是在点击+图标后没有切换，我已经粘贴了整个代码。
代码：下面是整个代码：
在技术表部分
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Projects Details</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<h:outputScript library="js" name="ppcr.js"></h:outputScript>
<h:outputStylesheet library="css" name="ppcr.css"/>
<h:outputStylesheet library="css" name="styles.css"/>
<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
$('.subMenu').smint({
'scrollSpeed' : 1000
});
});
</script>
</h:head>
<h:body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
<div class="header">
<h:graphicImage style="vertical-align: middle" value="resources/images/logoMainShort.gif" />
<b style="vertical-align: top;"> Quotation Tool</b>
</div>
<div style="line-height: 25px;margin: 0px 6px 0px 6px;">
<h:form>
<div class="navigation">
<h:outputLink value="projects.xhtml">
<h:outputText value="PROJECTS" style="color: #ffffff; text-decoration: none;"></h:outputText>
</h:outputLink>
<h:outputLink value="masterData.xhtml">
<b style="padding-left: 20px;">
<h:outputText
value="MASTER DATA"
style="color: #ffffff; text-decoration: none;">
</h:outputText>
</b>
</h:outputLink>
</div>
</h:form>
</div>
<div class= "background">
<div class="test" style="padding-top: 10px">Ford_V408_2015_PPCR01</div>
<!-- <div class="wrap"> -->
<div class="subMenu" style="margin-left: 1px">
<a href="#" style="width: 88%;" id="s1" class="subNavBtn">List To Quote</a>
</div>
<div class="subMenu" style="margin-left: 22%">
<a href="#" style="width: 88%;" id="s2" class="subNavBtn">AVO</a>
</div>
<div class="subMenu" style="margin-left: 43.8%">
<a href="#" style="width: 88%;" id="s3" class="subNavBtn">Technical Sheet</a>
</div>
<div class="subMenu" style="margin-left: 65%">
<a href="#" style="width: 88%;" id="s3" class="subNavBtn">Geometry</a>
</div>
<h:form id="testForm">
<div class="innersection">
<div class="section s5">
<div class="heading">
<h:outputText value="Project information" />
</div>
<p:panelGrid
style="margin:5px 0px 15px 0px;
width:100%"
styleClass="panelgrid">
<p:row>
<p:column colspan="8" />
</p:row>
<p:row>
<p:column style="border:white" styleClass="columnA">Brand Group</p:column>
<p:column styleClass="columnB">
<h:outputText value="Ford" />
</p:column>
<p:column styleClass="columnA">Model (Car Name) </p:column>
<p:column styleClass="columnB">
<h:outputText value="Ford Mondeo" />
</p:column>
<p:column styleClass="columnA">Annual Model Volume </p:column>
<p:column styleClass="columnB">
<h:outputText value="25 000" />
</p:column>
<p:column styleClass="columnA">Lifetime</p:column>
<p:column styleClass="columnB">
<h:outputText value="3 years" />
</p:column>
</p:row>
<p:row>
<p:column styleClass="columnA">Brand</p:column>
<p:column styleClass="columnB">
<h:outputText value="Ford" />
</p:column>
<p:column styleClass="columnA">Project Code</p:column>
<p:column>
<h:commandLink value="FORD_V408_2015" action="/projectDetails.xhtml" target="_blank"
style="cursor:pointer;font-style: normal; font-family: Arial;color:#0000ff;font-size:13px;text-decoration: underline;"/>
</p:column>
<p:column styleClass="columnA">Reason to quote</p:column>
<p:column styleClass="columnB">
<h:outputText value="New Car" />
</p:column>
<p:column styleClass="columnA">Peak Volume</p:column>
<p:column styleClass="columnB">
<h:outputText value="25 000" />
</p:column>
</p:row>
<p:row>
<p:column colspan="8" />
</p:row>
</p:panelGrid>
<div class="heading">
<h:outputText value="PPCR general information" />
</div>
<p:panelGrid
id="addText"
style="margin:5px 0px 15px 0px; width:100%"
styleClass="panelgrid">
<p:row>
<p:column colspan="8" />
</p:row>
<p:row>
<p:column styleClass="columnA">Part Type</p:column>
<p:column styleClass="columnB">
<h:outputText value="WS" />
</p:column>
<p:column styleClass="columnA">PPCR Date</p:column>
<p:column styleClass="columnB">
<h:outputText value="25/10/2013" />
</p:column>
<p:column styleClass="columnA" style="width:14%;">Development Step</p:column>
<p:column styleClass="columnB">
<h:selectOneMenu value="#{ppcrGeneral.selectedStepsValue}" style="width:280px;" >
<f:selectItems value="#{ppcrGeneral.stepsValue}" />
</h:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column styleClass="columnA">Family</p:column>
<p:column styleClass="columnB">
<h:outputText value="Laminated " />
</p:column>
<p:column styleClass="columnA">Reply Date</p:column>
<p:column styleClass="columnB">
<h:inputText value="04/11/2013" />
</p:column>
<p:column styleClass="columnA">Reason for<br/> update</p:column>
<p:column rowspan="3" styleClass="columnB">
<p:inputTextarea rows="6" cols="42" autoResize="false" />
</p:column>
</p:row>
<p:row>
<p:column styleClass="columnA">Market</p:column>
<p:column styleClass="columnB">
<h:selectOneMenu value="#{ppcrGeneral.selectedMarketValue}" style="width:140px;" >
<f:selectItems value="#{ppcrGeneral.marketValue}" />
</h:selectOneMenu>
</p:column>
<p:column styleClass="columnA" style="width:14%;">Reference PPCR</p:column>
<p:column styleClass="columnB">
<h:inputText size="16"/>
</p:column>
<p:column/>
</p:row>
<p:row>
<p:column
style="font-style: normal; font-family:Arial;font-size: 13px; font-weight: bold;width:15%;color: #333333;
text-align: right;">
Document Hyperlink
</p:column>
<p:column colspan="3">
<h:inputText size="51"/>
<p:commandLink>
<p:graphicImage
style="vertical-align: middle; margin-left: 5px;position: middle;border: none; WIDTH:15px; HEIGHT:15px;"
value="resources/images/attach.png"/>
</p:commandLink>
</p:column>
<p:column/>
</p:row>
<p:row>
<p:column colspan="4"/>
<p:column styleClass="columnA" style="vertical-align:top;">Industrialization Manager</p:column>
<p:column styleClass="columnB" style="width:15%" >
<ui:repeat var="input" value="#{bean.inputTexts}">
<p:inputText size="18" value="#{inputTexts}" style="margin-bottom:2px;"/>
</ui:repeat>
<b style="padding:0px 0px 0px 18px">
<p:commandButton
value="Add Manager"
actionListener="#{bean.addInput}"
update="addText"
style=" margin-bottom:10px;width:auto;height:28px;font-style: normal; font-family:Arial;font-size: 13px;
color: #000000;text-align:center;font-weight: normal;text-decoration:none;cursor: pointer "/>
</b>
</p:column>
</p:row>
<p:row>
<p:column colspan="8" />
</p:row>
</p:panelGrid>
<div class="heading">
<h:outputText value="Packaging" />
</div>
<p:panelGrid
styleClass="panelgrid"
style="margin:5px 0px 15px 0px; width:100%;" >
<p:row>
<p:column colspan="8" />
</p:row>
<p:row>
<p:column styleClass="columnC" style="width:25%">Customer Packaging
<p:selectBooleanCheckbox style="position:absolute; margin-left:10px;"></p:selectBooleanCheckbox>
</p:column>
<p:column styleClass="columnC" style="width:25%">AGC Container
<p:selectBooleanCheckbox style="position:absolute; margin-left:10px;"></p:selectBooleanCheckbox>
</p:column>
<p:column styleClass="columnC" style="width:25%">OEM
<p:selectBooleanCheckbox style="position:absolute; margin-left:10px;"></p:selectBooleanCheckbox>
</p:column>
<p:column styleClass="columnC" style="width:25%; text-align:center;">ARG
<p:selectBooleanCheckbox style="position:absolute; margin-left:10px;"></p:selectBooleanCheckbox>
</p:column>
</p:row>
<p:row>
<p:column colspan="8" />
</p:row>
</p:panelGrid>
<div class="heading">
<h:outputText value="Logistics" />
</div>
<p:panelGrid
id="logistics"
styleClass="panelgrid"
style="margin:5px 0px 15px 0px; width:100%;" >
<p:row>
<p:column colspan="6" />
</p:row>
<p:row>
<p:column styleClass="columnA" style="width:15%;vertical-align:top;">Shipping location </p:column>
<p:column styleClass="columnB" >
<ui:repeat var="input" value="#{bean.inputLocation}">
<p:inputText value="#{inputLocation}" style="margin-bottom:2px;"/>
</ui:repeat>
<p:commandButton
value="Add Location"
actionListener="#{bean.addLocation}"
update="logistics"
style=" margin-bottom:10px;width:auto;height:28px;font-style: normal; font-family:Arial;
font-size: 13px;color: #000000;text-align:center;font-weight: normal;text-decoration:none;cursor: pointer "/>
</p:column>
<p:column styleClass="columnA" style="width:15%; vertical-align:top; ">Incoterm </p:column>
<p:column styleClass="columnB">
<ui:repeat var="input" value="#{bean.inputIncoterm}">
<h:selectOneMenu value="#{ppcrGeneral.selectedIncotermValue}" style="width:140px;margin-bottom:6px" >
<f:selectItems value="#{ppcrGeneral.incotermValue}" />
</h:selectOneMenu>
</ui:repeat>
<!-- <b style="margin: 0px 30px 20px 0px;"> -->
<p:commandButton
value="Add Incoterm"
actionListener="#{bean.addIncoterm}"
update="logistics"
style=" margin-bottom:10px;width:auto;height:28px;font-style: normal; font-family:Arial;font-size: 13px;
color: #000000;text-align:center;font-weight: normal;text-decoration:none;cursor: pointer "/>
<!-- </b> -->
</p:column>
<p:column styleClass="columnA" style="width:15% ;vertical-align:top;" >Just in sequence </p:column>
<p:column styleClass="columnB" style="width:20%;vertical-align:top;">
<h:selectOneMenu value="#{ppcrGeneral.selectedSequenceValue}" style="width:100px;" >
<f:selectItems value="#{ppcrGeneral.sequenceValue}" />
</h:selectOneMenu>
<h:outputText
value="per day"
style="margin-left:5px;font-style: normal; font-family:Arial; FONT-WEIGHT: bold;color:#999999;font-size: 13px;"/>
</p:column>
</p:row>
<p:row>
<p:column colspan="8" />
</p:row>
</p:panelGrid>
</div>
<div class="section s1">
Removed code fron this section
</div>
<div class="section s2">
<h1>AVO</h1>
</div>
<!-- PPCR: Technical Section -->
<div class="section s3">
<div class="heading">
<h:outputText value="Technical Sheet" />
</div>
<div class="border">
<p:panelGrid style="margin:5px 0px 15px 0px; width:100%"
styleClass="panelgrid">
<p:row>
<p:column colspan="2"/>
</p:row>
<p:row>
<p:column styleClass="columnB" style="width:30%">
<h:commandLink action="/pdfFileUpload.xhtml" target="options:height=200, width=300">
<p:graphicImage value="resources/images/upload.png"
style="vertical-align: middle; position: middle;border: none;"/>
</h:commandLink>
</p:column>
<!-- Panel is not working -->
<p:column rowspan="11" style="vertical-align:top">
<p:panel header="Size" toggleable="true" rendered="true"
toggleOrientation="vertical">
<h:outputText value="Test" />
</p:panel>
</p:column>
<!-- Panel is not working -->
</p:row>
<p:row>
<p:column />
</p:row>
<p:row>
<p:column />
</p:row>
<p:row>
<p:column>
<h:outputText
value="Manufacuring Control Method"
style="color:#164990;font-size:13px;font-family:Arial;font-style: normal;font-weight: bold;" />
</p:column>
</p:row>
<p:row>
<p:column >
<h:outputText value="Check fixt. position" styleClass="columnD"/>
<h:selectOneMenu
value="#{ppcrGeneral.selectedMarketValue}"
style="width:200px;font-style: normal;font-family: Arial;FONT-WEIGHT: 400;font-size: 13px;text-align: left;color: #333333;
margin-left: 15px;" >
<f:selectItems value="#{ppcrGeneral.marketValue}" />
</h:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column >
<h:outputText value="Check fixt. concept" styleClass="columnD"/>
<h:selectOneMenu
value="#{ppcrGeneral.selectedMarketValue}"
style="width:200px;font-style: normal;font-family: Arial;FONT-WEIGHT: 400;font-size: 13px;text-align: left;color: #333333;
margin-left: 15px;" >
<f:selectItems value="#{ppcrGeneral.marketValue}" />
</h:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column >
<h:outputText value="Spacers" styleClass="columnD" style="margin-left:21%"/>
<h:selectOneMenu
value="#{ppcrGeneral.selectedMarketValue}"
style="width:200px;font-style: normal;font-family: Arial;FONT-WEIGHT: 400;font-size: 13px;text-align: left;color: #333333;
margin-left: 15px;" >
<f:selectItems value="#{ppcrGeneral.marketValue}" />
</h:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column >
<h:outputText value="Stoppers" styleClass="columnD" style="margin-left:20%"/>
<h:selectOneMenu
value="#{ppcrGeneral.selectedMarketValue}"
style="width:200px;font-style: normal;font-family: Arial;FONT-WEIGHT: 400;font-size: 13px;text-align: left;color: #333333;
margin-left: 15px;" >
<f:selectItems value="#{ppcrGeneral.marketValue}" />
</h:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column colspan="2"/>
</p:row>
<p:row>
<p:column colspan="2"/>
</p:row>
</p:panelGrid>
</div>
</div>
<!-- PPCR: Technical Section Ends -->
<div class="section s4">
<h1>Geometry</h1>
<br class="clear"></br>
</div>
</div>
<script type="text/javascript" language="javascript">
var _gaq = _gaq || [];
_gaq.push([ '_setAccount', 'UA-9804757-1' ]);
_gaq.push([ '_trackPageview' ]);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl'
: 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</h:form>
</div>
</h:body>
</html>
答案 0 :(得分：0)
可能是因为jquery，如果在页面中包含jquery，许多primefaces组件都无法正常工作， 替换
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
with：
<h:outputScript library="primefaces" name="jquery/jquery.js" />