Question

我最近一直在尝试使用jQuery，并尝试创建类似spring的对象，但slideToggle()似乎存在一些问题。有什么帮助吗？

HTML

<table>
    <td>
        <div class="header">Spring!</div>
        <div class="footer">Spring!</div>
        <div class="header">Spring!</div>
        <div class="footer">Spring!</div>
        <div class="header">Spring!</div>
        <div class="footer">Spring!</div>
        <div class="header">Spring!</div>
        <div class="footer">Spring!</div>
        <div class="header">Spring!</div>
        <div class="footer">Spring!</div>
        <div class="header">Spring!</div>
        <div class="footer">Spring!</div>
    </td>
</table>

CSS

  .header {
    background-color: #ffffff;
    padding: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
}
.footer {
    background-color: #cccccc;
    padding: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
}

jQuery的：

$(document).ready(function () {
    $(".header").hover(function () {
        $(".footer").slideToggle();
    }
}

Answer 1

我想你刚忘了一些)

$(document).ready(function () {
    $(".header").hover(function () {
        $(".footer").slideToggle();
    }) //forgot a ")" here
})  //forgot a ")" here

Fiddle

Answer 2

你缺少括号和分号。试试这个：

$(document).ready(function(){
    $(".header").hover(function(){
        $(".footer").slideToggle();
    }); //here you were missing ")" and ";"
}); //here you were missing ")" and ";"

更新回答：

我建议您使用.on()方法而不是简写操作符。从jQuery 1.7开始，.on()方法提供了附加事件处理程序所需的所有功能。你也可以这样做：

$(document).ready(function(){
    $(document).on('mouseenter','.header',function(){
        $(".footer").slideToggle();
    }).on('mouseleave','.header',  function(){
       $(".footer").slideToggle();
   });
});

演示： http://jsfiddle.net/MsC9k/1/

Answer 3

只需要更正您的脚本：

<script type="text/javascript">
$(document).ready(function(){
    $(".header").hover(function(){
        $(".footer").slideToggle();
    });
});

slideToggle不起作用

3 个答案:

Fiddle