Fatal编程技术网
  • javascript/
  • Javascript HTML扩展/收缩表-上/下箭头

Javascript HTML扩展/收缩表-上/下箭头

javascript android jquery html css

Javascript HTML扩展/收缩表-上/下箭头,javascript,android,jquery,html,css,Javascript,Android,Jquery,Html,Css,我对HTML并不陌生，但我对使用JSFIDLE和CSS的JavaScripts jQuery非常陌生。是的，n00b。我理解代码有困难 我是新来的。。。我试图搜索以前是否有人问过这个问题，但找不到任何东西。如果我要加倍道歉。希望不是 不管怎样，我想把我的整个电影集编入一个HTML列表，这样我就可以在我的三星Galaxy标签3上打开这个列表。问题是，在一个小的平板电脑屏幕上显示的信息太多了，所以我研究了扩展可点击的表格，发现了这个漂亮的教程： http://jsfiddle.net/Pn3m5/

我对HTML并不陌生，但我对使用JSFIDLE和CSS的JavaScripts jQuery非常陌生。是的，n00b。我理解代码有困难

我是新来的。。。我试图搜索以前是否有人问过这个问题，但找不到任何东西。如果我要加倍道歉。希望不是

不管怎样，我想把我的整个电影集编入一个HTML列表，这样我就可以在我的三星Galaxy标签3上打开这个列表。问题是，在一个小的平板电脑屏幕上显示的信息太多了，所以我研究了扩展可点击的表格，发现了这个漂亮的教程：

http://jsfiddle.net/Pn3m5/
问题是，我几乎不理解java背后的编码。我快到了！有些事情是有道理的，但当我更改、保存并重新加载HTML时，它很少按我希望的方式工作

另外，使用默认+/-脚本意味着在展开/收缩表时整行都会抖动，因为这两个行之间存在大小差异。所以在谷歌搜索之后，我发现这个网站有一个冷静的向上/向下箭头表：

http://www.jankoatwarpspeed.com/expand-table-rows-with-jquery-jexpand-plugin/
在阅读了这个网站后不久，我决定更换通用的难看的+/-向上/向下箭头按钮。问题是HTML、JS和CSS代码与这两个教程都不一样，所以我尝试对它们进行反向工程，并将它们合并到一起，结果令人沮丧

以下是箭头的链接：

http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/arrows.png
*进一步编辑：链接中提供的箭头为黑色。我在Photoshop中反转颜色，将它们视为白色，背景为黑色。很抱歉给您带来不便！我希望我能上传我所有的html、js、css和图片，以及它们各自的子文件夹，以便正确演示

这段代码中的其他图像都是我自己在Photoshop上编辑的，因此无法在线获取。 问题：我设法让它看起来不错，但当我单击向下箭头时，它们都会一起改变方向，这是一个巨大的痛苦。我只想更改我要扩展的行上的向下箭头，而不是全部

我的心告诉我，我的JavaScript文件中有一个错误，也许这里有人用敏锐的眼光阅读这个文件可以发现我的问题？我看不见

请帮忙

这是我的HTML代码：list.HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Expandable List</title>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection">
        <script type="text/javascript" src="js/jquery-1.4.2.min.js">
        </script>
        <script type="text/javascript" src="js/scripts.js">
        </script>

<style type="text/css">
.myTable { background-color:#000000;border-collapse:collapse; }
.myTable th { background-color:#000000;color:white; }
.myTable tr td { background:#000000 url(img/back.png) repeat-x scroll center left; }
.myTable td, .myTable th { padding:0.5px;border:1px solid #666666; }
.myTable div.arrow { background:transparent url(img/arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block; }
.myTable div.up { background-position:0px 0px; }
</style>

    </head>
    <body style="background-color:black">

<font color="white">

<center><table class="myTable">
    <tr><td><div class="arrow"></div></td><td><p>Name</p></td><td><p>Year</p></td><td><p>Genre</p></td><td><p>Subtitles?</p></td><td><p>Length</p></td><td><p><center><a href="" target="_blank"><img src="img/tv.png"></a></center></p></td><td><p>Rating</p></td><td><p>Location</p></td><td><p>Res</p></td></tr>
    <tr><td colspan="10" valign="top"><p>Blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td></tr>

    <tr><td><div class="arrow"></div></td><td><p>Name</p></td><td><p>Year</p></td><td><p>Genre</p></td><td><p>Subtitles?</p></td><td><p>Length</p></td><td><p><center><a href="" target="_blank"><img src="img/tv.png"></a></center></p></td><td><p>Rating</p></td><td><p>Location</p></td><td><p>Res</p></td></tr>
    <tr><td colspan="10"><p>Blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td></tr>

    <tr><td><div class="arrow"></div></td><td><p>Name</p></td><td><p>Year</p></td><td><p>Genre</p></td><td><p>Subtitles?</p></td><td><p>Length</p></td><td><p><center><a href="" target="_blank"><img src="img/tv.png"></a></center></p></td><td><p>Rating</p></td><td><p>Location</p></td><td><p>Res</p></td></tr>
    <tr><td colspan="10"><p>Blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td></tr>
</table></center>
</font>
    </body>
</html>
这是我的CSS代码：style.CSS

table{ width: 90%; }
tr {border: 1px solid #666666;}

.scroll-wrapper{
    border: 1px solid black;
    width: 200px;
    overflow-x: scroll;
    /*making the scroll have momentum on mobile devices
    http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements
    */
    -webkit-overflow-scrolling: touch;

}
/*hiding the scrollbar*/
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
 }
请帮忙！如果您有任何关于修复这些讨厌的上/下箭头的有用建议，我们将不胜感激

格斯

帮助我欧比-万·克诺比，你是我唯一的希望

你可能知道HTML，但你真的需要在他们的工作技能，仍然使用和。。。不好。添加了一个不完美的。你能提供你正在使用的图标的url吗？明显的错误：一些jquery类选择器缺少。arrow而不是。arrow我投票将这个问题作为离题题来结束，因为它是不完整的、无效的、过时的、宽泛的、充满错误的，并且几乎在两年前被用户抛弃，没有答案。 
table{ width: 90%; }
tr {border: 1px solid #666666;}

.scroll-wrapper{
    border: 1px solid black;
    width: 200px;
    overflow-x: scroll;
    /*making the scroll have momentum on mobile devices
    http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements
    */
    -webkit-overflow-scrolling: touch;

}
/*hiding the scrollbar*/
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
 }