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

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(或其他固定大小的字体)，这样它不会导致文本四处移动..