Question

我正在尝试汤姆滑动切换一张桌子但是臀部不显眼。我试图用两个div元素包装相应的id和类。我是网络发展的新手，所以任何反馈都很棒。

JQuery的

<script type="text/javascript" src="jquery-1.4.2.min.js"></script><script type="text/javascript">

$(".slideDownbox").click(function () {
   $(this).hide().slideDown('slow');
});

$(".slideUpbox").click(function () {
   $(this).slideUp(2000);
});

$("#slideToggle").click(function () {
   $('.slideTogglebox').slideToggle();
});

$("#reset").click(function(){
 location.reload();
});
</script>

HTML表：

<button id="slideToggle">slideToggle()</button> </blockquote><!--Table of Cintacts, see embeed CSS below-->
<div class="clear">
<div class="slideTogglebox">
<table style="width: 687px; height: 217px" summary="folder contents for fly types" align="center">
    <thead>
        <tr>
            <th class="name">
            <h5>Name</h5>
            </th>
            <th class="location">
            <h5>Location</h5>
            </th>
            <th class="color">
            <h5>Details</h5>
            </th>
        ......tablke rows and content
</table>

CSS

<style type="text/css" media="screen">
body {
    font-family: arial, helvetica, sans-serif;
}
table {
    border: 1px solid black;
    border-collapse: collapse;
    margin-bottom: 3em;
    font-size: 70%;
    line-height: 1.1;
}
tr:hover, td.start:hover, td.end:hover {
    background: #FF9;
}
th, td {
    border: 1px solid black;
    padding: .3em .5em;
}
th {
    font-weight: normal;
    text-align: left;
    background: url(tabletree-arrow.gif) no-repeat 2px 50%;
    padding-left: 15px;
}
th.name { width: 12em; }
th.location { width: 12em; }
th.color { width: 10em; }
thead th {
    background: #c6ceda;
    border-color: #fff #fff #888 #fff;
    border-style: solid;
    border-width: 1px 1px 2px 1px;
    padding-left: .5em;
}
tbody th.start {
    background: url(tabletree-dots.gif) 18px 54% no-repeat;
    padding-left: 26px;
}
tbody th.end
{
background: url(tabletree-dots2.gif) 18px 54% no-repeat;
padding-left: 26px;
}
.clear{
clear:both;
}
</style>

Answer 1

使用当前版本的jquery和ready函数。

你可以找到它

摘录代码

<强>的script.js

 $( document ).ready(function() {

  $("#slideToggle").on( "click", function( event ) {
    $(".slideTogglebox").fadeToggle();
  });

  $(".slideUpbox ").click(function () {
     $(this).slideUp(2000);
  });


  $("#reset ").click(function(){
   location.reload();
  });

})

<强>的index.html

<!DOCTYPE html>
<html>

  <head>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <button id="slideToggle">slideToggle()</button>
    <div class="clear">
      <div class="slideTogglebox">
        <table style="width: 687px; height: 217px" summary="folder contents for fly types" align="center">
          <thead>
            <tr>
              <th class="name">
                <h5>Name</h5>
              </th>
              <th class="location">
                <h5>Location</h5>
              </th>
              <th class="color">
                <h5>Details</h5>
              </th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </body>

</html>

桌上的SlideToggle JQuery不会工作

1 个答案: