Почему мои складки не работают?

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); 
    }); 

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

---

Наконец, вы можете установить шрифт courier для .headerArrow (или каким-либо другим размером шрифта фиксированной), так что это не заставит текст двигаться ..

Answer 2

Вы сбросили текст для всех тегов span, используя $('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 (е) {}

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