我希望此页面上的下拉菜单在“+”之间切换以显示更多信息，并使用“ - ”隐藏它。但我的jquery技能非常业余，我无法找到实现这一目标的方法。
这是我的代码：http://codepen.io/itscodysolomon/pen/zxXaZm
<p id="semesterHeader">1st Semester<span class="headerHours">12 Hours</span></p>
<ul>
<li>
<!--Class title goes here-->
<a href="#"><h3><span class="headerArrow">+</span>FYES 1000 First Year experience</h3></a>
<!--Class description goes here-->
<p>Prerequisite: appropriate placement test scores -or- ENGL 0096 and READ 0096<br><br> The first-year experience course is designed to connect and acclimate new students to Gwinnett Technical College. In addition, the course creates an awareness of various campus resources and the academic skills necessary to achieve educational and career success. Through the use of academic strategies, self-discovery, and technology, students will develop college-level learning and success skills necessary to be successful.<br><br>Contact hours: Class – 2, Lab – 0. Credit hours: 2. (E)
</p>
</li>
<li>
<!--Class title goes in this anchor tag-->
<a href="#"><h3><span class="headerArrow">+</span>CIST 1001 Computer Concepts</h3></a>
<!--Class description goes here-->
<p>Prerequisite: Diploma level proficiency in English and reading<br><br>Provides an overview of information systems, computers and technology. Topics include: Information Systems and Technology Terminology, Computer History, Data Representation, Data Storage Concepts, Fundamentals of Information Processing, Fundamentals of Information Security, Information Technology Ethics, Fundamentals of Hardware Operation, Fundamentals of Networking, Fundamentals of the Internet, Fundamentals of Software Design Concepts, Fundamentals of Software, (System and Application), System Development Methodology, Computer Number Systems conversion (Binary and Hexadecimal), Mobile computing.<br><br>Contact hours: Class - 2, Lab -4. Credit hours: 4. (E)
</p>
</li>
<li>
脚本
$(function(){
$("li").children('p').hide();
});
$(document).ready(function(){
// document.getElementById('headerArrow').innerHTML() = '↓';
$("a").click(function( event ){
if ($(this).children('span').text('+')){
$('span').text('-');
}
else{
$('span').text('+');
}
event.preventDefault();
$(this).siblings("p").toggle(250);
});
});
// if ($(this).children('span').html() == '+'){
// $(this).html('-');
// }
// else {
// $(this).html('+');
// }
答案 0 :(得分：2)
使用.text('+') 不检查文字是否为+。它只是设置它。
因此您需要使用.text()获取其值并检查..
此外，您使用.children查找范围，但children仅返回直接子项。由于您的跨度位于h3内，因此它不是被点击的a的直接子项，因此未找到它。
$("a").click(function( event ){
// get the relevant arrow item
var arrow = $(this).find('.headerArrow');
// check its text against '+'
if ( arrow.text() === '+'){
arrow.text('-');
}
else{
arrow.text('+');
}
event.preventDefault();
$(this).siblings("p").toggle(250);
});
http://codepen.io/gpetrioli/pen/qEwKjG
演示最后，您可能希望将{{1>}（或其他固定大小的字体）的字体设置为courier，这样就不会导致文本移动围绕..
答案 1 :(得分：1)
您正在使用$('span').text('+')重置所有span标记的文本。此外，您还没有测试文本，而是使用text('+')进行设置。
$("a").click(function( event ){
// caching the span tag for performance benefits
var $spanTag = $(this).find('span');
if ($spanTag.text()==="+"){
$spanTag.text('-');
} else{
$spanTag.text('+');
}
// remaining code is same
答案 2 :(得分：0)
好的，所以这里你的代码工作正常
关于我刚刚替换的html代码..用....然后在js代码上删除了旧代码以进行切换然后创建了一个新函数drop_menu（e）{}
$(function(){
$("li").children('p').hide();
});
function drop_menu(e){
var _span = e.find('h3').find('span');
if(_span.text() == "+"){
_span.text('-');
}else{
_span.text('+');
}
e.next().toggle(250);
}
// if ($(this).children('span').html() == '+'){
// $(this).html('-');
// }
// else {
// $(this).html('+');
// }li {
color:white;
list-style:none;
padding-bottom:2px;
border-top:solid white 4px;
background-color:#0077B3;
}
p{
border-top:solid white 2px;
padding:10px;
padding-left:15px;
}
ul {
text-align: left;
font-family:Open Sans;
font-weight:300;
padding:0px;
width:35%;
}
#container {
}
/* unvisited link */
a:link {
color: #000000;
}
/* visited link */
a:visited {
color: #000000;
}
/* mouse over link */
a:hover {
color: #000000;
}
/* selected link */
a:active {
color: #000000;
}
a {
text-decoration:none;
}
h3{
color:white;
font-weight:300;
padding-left:15px;
}
.headerArrow{
padding-right: 20px;
font-size: 15px;
}
.headerHours {
font-size:18pt;
padding-left:100px;
color: #0077B3;
}
#semesterHeader{
font-size:20pt;
border-bottom: solid #0077B3 2px;
position:relative;
width:425px;
font-family:open sans;
font-weight:300;
color:#0077B3;
text-align: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
<link href="normalize.css" rel="stylesheet" type="text/css"/>
<link href="curriculumStyle.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="curriculumScript.js"></script>
</head>
<body>
<div id="container" align="center">
<div>
<!--1st semester track section-->
<p id="semesterHeader">1st Semester<span class="headerHours">12 Hours</span></p>
<ul>
<li>
<!--Class title goes here-->
<a href="javascript:void(0)" onclick="drop_menu($(this))"><h3><span class="headerArrow">+</span>FYES 1000 First Year experience</h3></a>
<!--Class description goes here-->
<p>Prerequisite: appropriate placement test scores -or- ENGL 0096 and READ 0096<br><br> The first-year experience course is designed to connect and acclimate new students to Gwinnett Technical College. In addition, the course creates an awareness of various campus resources and the academic skills necessary to achieve educational and career success. Through the use of academic strategies, self-discovery, and technology, students will develop college-level learning and success skills necessary to be successful.<br><br>Contact hours: Class – 2, Lab – 0. Credit hours: 2. (E)
</p>
</li>
<li>
<!--Class title goes in this anchor tag-->
<a href="javascript:void(0)" onclick="drop_menu($(this))"><h3><span class="headerArrow">+</span>CIST 1001 Computer Concepts</h3></a>
<!--Class description goes here-->
<p>Prerequisite: Diploma level proficiency in English and reading<br><br>Provides an overview of information systems, computers and technology. Topics include: Information Systems and Technology Terminology, Computer History, Data Representation, Data Storage Concepts, Fundamentals of Information Processing, Fundamentals of Information Security, Information Technology Ethics, Fundamentals of Hardware Operation, Fundamentals of Networking, Fundamentals of the Internet, Fundamentals of Software Design Concepts, Fundamentals of Software, (System and Application), System Development Methodology, Computer Number Systems conversion (Binary and Hexadecimal), Mobile computing.<br><br>Contact hours: Class - 2, Lab -4. Credit hours: 4. (E)
</p>
</li>
<li>
<!--Class title goes in this anchor tag-->
<a href="#"><h3>CIST 1305 Program Design and Development</h3></a>
<!--Class description goes here-->
<p>Prerequisite: none<br><br>An introductory course that provides problem solving and programming concepts for those that develop user applications. An emphasis is placed on developing logic, troubleshooting, and using tools to develop solutions. Topics include: problem solving and programming concepts, structured programming, the four logic structures, file processing concepts, and arrays.<br><br> Contact hours: Class – 2, Lab – 2. Credit hours: 3. (E)
</p>
</li>
<li>
<!--Class title goes in this anchor tag-->
<a href="#"><h3>CIST 1510 Web Development I</h3></a>
<!--Class description goes here-->
<p>Prerequisite: none<br><br>Explores the concepts of Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), XML, and HTML following the current standards set by the World Wide Web Consortium (W3C) for developing inter-linking web pages that include graphical elements, hyperlinks, tables, forms, and image maps<br><br> Contact hours: Class – 2, Lab – 2. Credit hours: 3. (E)
</p>
</li>
</ul>
</div>
<div>
<!--2nd semester track section-->
<p id="semesterHeader">2nd Semester <span class="headerHours">12 Hours</span></p>
<!--possible <hr>-->
<ul>
<li>
<!--Class title goes here-->
<a href="#"><h3>ENGL 1101 Composition and Rhetoric</h3></a>
<!--Class description goes here-->
<p>Prerequisite: Degree level proficiency in English and reading; or ENGL 0098 and READ 0098<br><br>Explores the analysis of literature and articles about issues in the humanities and in society. Students practice various modes of writing, ranging from exposition to argumentation and persuasion. The course includes a review of standard grammatical and stylistic usage in proofreading and editing. An introduction to library resources lays the foundation for research. Topics include writing analysis and practice, revision, and research. Students write a research paper using library resources and using a formatting and documentation style appropriate to the purpose and audience. (Associate degree level course)<br><br>Contact hours: Class – 3, Lab – 0. Credit hours: 3. (E)
</p>
</li>
<li>
<!--Class title goes in this anchor tag-->
<a href="#"><h3>CIST 1520 Scripting Technologies</h3></a>
<!--Class description goes here-->
<p>Prerequisite: CIST 1305, CIST 1510<br><br>Students learn how to use the features and structure of a client side scripting language, explore the features on server side scripting and develop professional web applications that include special effects, interactive, dynamic, validated, and secure forms.<br><br>Contact hours: Class - 2, Lab -2. Credit hours: 3. (E)
</p>
</li>
<li>
<!--Class title goes in this anchor tag-->
<a href="#"><h3>CIST 1530 Web Graphics I</h3></a>
<!--Class description goes here-->
<p>Prerequisite: CIST 1001<br><br>Students will explore how to use industry standard or open source graphics software programs to create Web ready images and Web pages. Topics include advanced image correction techniques and adjustments, typography and interpolation as well as conditional scripting statements and arrays. The course includes a final project that allows students to develop a Web page/site using the chosen software. <br><br> Contact hours: Class – 2, Lab – 2. Credit hours: 3. (E)
</p>
</li>
<li>
<!--Class title goes in this anchor tag-->
<a href="#"><h3>CIST 1601 Information Security Fund</h3></a>
<!--Class description goes here-->
<p>Prerequisite: CIST 1001<br><br>This course provides a broad overview of information security. It covers terminology, history, security systems development and implementation. Student will also cover the legal, ethical, and professional issues in information security.<br><br> Contact hours: Class – 2, Lab – 2. Credit hours: 3. (E)
</p>
</li>
</ul>
</div>
<div>
<!--3rd semester track section-->
<p id="semesterHeader">3rd Semester <span class="headerHours">14 Hours</span></p>
<!--possible <hr>-->
<ul>
<li>
<!--Class title goes here-->
<a href="#"><h3>CIST1220 Structured Query Language- SQL</h3></a>
<!--Class description goes here-->
<p>Prerequisite: CIST 1001<br><br>Includes basic database design concepts and solving database retrieval and modification problems using the SQL language. Topics include: database Vocabulary, Relational Database Design, Date retrieval using SQL, Data Modification using SQL, Developing and Using SQL Procedures. <br><br>Contact hours: Class - 2, Lab - 5. Credit hours: 4. (E)
</p>
</li>
<li>
<!--Class title goes in this anchor tag-->
<a href="#"><h3>CIST 2351 PHP Programming I</h3></a>
<!--Class description goes here-->
<p> Prerequisite: CIST 1305, CIST 1510, CIST 1520<br><br>An introductory PHP programming course that teaches students how to create dynamic websites. Topics include: PHP and basic web programming concepts, installing PHP, embedding PHP in HTML, variables and constants, operators, forms, conditional statements, looping, arrays, and text files. <br><br>Contact hours: Class - 2, Lab - 5. Credit hours: 4. (E)
</p>
</li>
<li>
<!--Class title goes in this anchor tag-->
<a href="#"><h3>CIST 2531 Web Graphics II</h3></a>
<!--Class description goes here-->
<p>Prerequisite: CIST 1530<br><br>Students will further explore how to use and industry standard or open source graphics software program to create Web ready images and Web pages. Topics include advanced image correction techniques and adjustments, typography and interpolation as well as conditional scripting statements and arrays. <br><br>Contact hours: Class - 2, Lab - 2. Credit hours: 3. (E)
</p>
</li>
<li>
<!--Class title goes in this anchor tag-->
<a href="#"><h3>General Education Area III</h3></a>
<!--Class description goes here-->
<p>MATH 1111 - College Algebra<br>MATH 1101 - Mathematical Modeling<br>MATH 1100 - Quantitative Skills and Reasoning
</p>
</li>
</ul>
</div>
<div>
<!--4th semester track section-->
<p id="semesterHeader">4th Semester <span class="headerHours">13 Hours</span></p>
<!--possible <hr>-->
<ul>
<li>
<!--Class title goes here-->
<a href="#"><h3>General Education Area II</h3></a>
<!--Class description goes here-->
<p>ECON 2105 - Principles of Macroeconomics<br>ECON 2106 - Principles of Microeconomics<br>SOCI 1101 - Introduction to Sociology<br>
HIST 1111 - World History I<br>HIST 1112 - World History II<br>HIST 2111 - U. S. History I<br>HIST 2112 - U. S. History II<br>
POLS 1101 - American Government<br>PSYC 1101 - Introductory Psychology
</p>
</li>
<li>
<!--Class title goes in this anchor tag-->
<a href="#"><h3>CIST Elective</h3></a>
<!--Class description goes here-->
<p>CIST 1540 - Web Animation I<br>CIST 2371 - Java Programming I<br>CIST 2381 - Mobile Application Development
</p>
</li>
<li>
<!--Class title goes in this anchor tag-->
<a href="#"><h3>CIST 2550 Web Development II</h3></a>
<!--Class description goes here-->
<p>Prerequisite: CIST 1220, CIST 1510, CIST 2351<br><br>Web Development II teaches students how to manipulate data in a database using the Open Database Connectivity (ODBC) model. Students will learn to retrieve, update, and display database information with a web application. Database access may be accomplished using a web programming language (such as PHP, Microsoft VB, Microsoft C#, or Sun Java). Topics include manipulating data in a database, working with a relational database via Open Database Connectivity (ODBC), working with different database systems, developing forms and applications to interact with a database server(s), modifying data in a database, and controls and validation.<br><br>Contact hours: Class - 2, Lab - 2. Credit hours: 3. (E)
</p>
</li>
<li>
<!--Class title goes in this anchor tag-->
<a href="#"><h3>CIST 2921 IT Analysis Design & Proj Manager</h3></a>
<!--Class description goes here-->
<p>Prerequisite: none<br><br>IT Analysis, Design, and Project Management will provides a review and application of systems life cycle development methodologies and project management. Topics include: Systems planning, systems analysis, systems design, systems implementation, evaluation, and project management.<br><br>Contact hours: Class - 2, Lab - 5. Credit hours: 4. (E)
</p>
</li>
</ul>
</div>
<div>
<!--5th semester track section-->
<p id="semesterHeader">5th Semester <span class="headerHours">12 Hours</span></p>
<!--possible <hr>-->
<ul>
<li>
<!--Class title goes here-->
<a href="#"><h3>CIST1220 Structured Query Language- SQL</h3></a>
<!--Class description goes here-->
<p>Prerequisite: CIST 1001<br><br>Includes basic database design concepts and solving database retrieval and modification problems using the SQL language. Topics include: database Vocabulary, Relational Database Design, Date retrieval using SQL, Data Modification using SQL, Developing and Using SQL Procedures. <br><br>Contact hours: Class - 2, Lab - 5. Credit hours: 4. (E)
</p>
</li>
<li>
<!--Class title goes in this anchor tag-->
<a href="#"><h3>CIST 2351 PHP Programming I</h3></a>
<!--Class description goes here-->
<p> Prerequisite: CIST 1305, CIST 1510, CIST 1520<br><br>An introductory PHP programming course that teaches students how to create dynamic websites. Topics include: PHP and basic web programming concepts, installing PHP, embedding PHP in HTML, variables and constants, operators, forms, conditional statements, looping, arrays, and text files. <br><br>Contact hours: Class - 2, Lab - 5. Credit hours: 4. (E)
</p>
</li>
<li>
<!--Class title goes in this anchor tag-->
<a href="#"><h3>CIST 2531 Web Graphics II</h3></a>
<!--Class description goes here-->
<p>Prerequisite: CIST 1530<br><br>Students will further explore how to use and industry standard or open source graphics software program to create Web ready images and Web pages. Topics include advanced image correction techniques and adjustments, typography and interpolation as well as conditional scripting statements and arrays. <br><br>Contact hours: Class - 2, Lab - 2. Credit hours: 3. (E)
</p>
</li>
<li>
<!--Class title goes in this anchor tag-->
<a href="#"><h3>General Education Area III</h3></a>
<!--Class description goes here-->
<p>MATH 1111 - College Algebra<br>MATH 1101 - Mathematical Modeling<br>MATH 1100 - Quantitative Skills and Reasoning
</p>
</li>
</ul>
</div>
</div>
</body>
</html>