个人中心
gpt4 book ai didi

jquery - 表上的 SlideToggle JQuery 无法工作

转载 作者：太空宇宙 更新时间：2023-11-04 12:38:40 26 4
gpt4 key购买 nike

我正在尝试 tom slideToggle a table 但按钮没有响应。我试图将表格包装在两个具有相应 ID 和类的 div 元素中。我是网络开发的新手，所以任何反馈都很好。

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>

最佳答案

使用当前版本的 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>

关于jquery - 表上的 SlideToggle JQuery 无法工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27076730/

26 4 0
文章推荐： html - 更改指向同一页面的标签的样式
文章推荐： c++ - 如何使用 ISpLexicon::GetWords 获取单词列表？
文章推荐： CSS 转换和背面问题
文章推荐： javascript - 更改 Canvas 线，或两点之间的调整线
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com