可以.slideToggle()特定的<li>?</li>

时间:2012-10-09 03:13:11

标签: javascript jquery

拥有<ul>个导航链接。一个特定的<li>实际上变成了3个链接。希望特定<li>滑动打开和关闭以显示其他三个链接。

托管here.

<ul id="courseLinks">
    <li><a href="#"><strong>Week 1</strong> introduction</a></li>
    <li><a href="./homework/week2/week2homework.htm"><strong>Week 2</strong> dev tools + standards</a></li>
    <li><a href="./homework/week3/week3homework.htm"><strong>Week 3</strong> HTML 5 &amp; SEO</a></li>
    <li><a href="#" id="homeworkSlide"><strong>Week 4</strong> css concepts</a></li>
    <li id="slider"><a href="homework/week4/exercise1.htm">Exercise 1</a>
            <a href="homework/week4/exercise2.htm">Exercise 2</a>
            <a href="homework/week4/week4homework.htm">Homework</a></li>
    <li><a href="#"><strong>Week 5</strong> advanced css</a></li>
    <li><a href="#"><strong>Week 6</strong> server side includes</a></li>
    <li><a href="#"><strong>Week 7</strong> site construction</a></li>
    <li><a href="#"><strong>Week 8</strong> development methodology 1</a></li>
    <li><a href="#"><strong>Week 9</strong> user experience</a></li>
    <li><a href="#"><strong>Week 10</strong> social software</a></li>
    <li><a href="#"><strong>Week 11</strong> project work</a></li>
    <li><a href="#"><strong>Week 12</strong> final examination</a></li>
</ul><!--nav-->

Jquery的:

$('#homeworkSlide').click(function() {
  $('#slider').slideToggle('slow', function() {
    // Animation complete.
  });
});

拒绝工作。此时自学javascript,是不是可以用这种方式修改<ul>?或者我做错了什么?

2 个答案:

答案 0 :(得分:1)

我已经阅读了host上的源代码,发现绑定操作没有绑定在$(document).ready(...)中,这可能就是原因。

所以,修改代码。

$(document).ready( function() { 
    $('#homeworkSlide').click(function() {
      $('#slider').slideToggle('slow', function() {
        // Animation complete.
      });
    });
} );

答案 1 :(得分:0)

当粘贴到控制台时,该代码在该页面上正常工作。确保在DOM ready

上运行它