为什么我的下拉菜单不起作用？

Question

I would like for the drop downs on this page to alternate between '+' to reveal more info and '-' to hide it. But my jquery skills are very amateur and I cannot find a way to accomplish this.

Here is my code: 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>

the script

$(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

Using .text('+') does not check if the text is + . It just sets it so.

so you need to use the .text() to gets its value and check that..

Moreover, you were using .children to find the span, but children only returns immediate children. Since your span is inside the h3 it is not an immediate child of the a that was clicked, so it was not being found..

$("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);
  });

Demo at http://codepen.io/gpetrioli/pen/qEwKjG

---

Finally, you might want to set the font to courier for the .headerArrow ( or some other fixed sized font ) so that it is not cause the text to move around..

Answer 2

You were resetting the text for all span tags using $('span').text('+') . Also you where not testing the text instead you were setting it with 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, so here you got the code working fine

on the html code I've just replaced .. with .... Then on the js code just removed the old code for toggling then created a new function 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 - US History I<br>HIST 2112 - US 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>