为什么我的下拉式工作不行？

Question

我希望在此页面上的下拉菜单中替换'+'以显示更多信息，并使用' - '来隐藏它。但我的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('+'); 
    //  } 

Answer 1

使用.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

---

最后，你可能想为.headerArrow（或某些其他固定大小的字体）设置字体为courier，以便它不会导致文本移动。

Answer 2

您正在使用$('span').text('+')重置所有量程标签的文本。此外，你在哪里不测试文本，而是你用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 

Answer 3

Okayy，所以在这里你得到的代码在我刚刚更换的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); 
 
} 
 

 
\t // if ($(this).children('span').html() == '+'){ 
 
\t // \t \t $(this).html('-'); 
 
\t //  } 
 
\t //  else { 
 
\t //  \t $(this).html('+'); 
 
\t //  }

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>