Question

我不是HTML的新手，但我对JavaScripts（使用JSFiddle的jQuery）和CSS非常陌生。所以是的，n00b。我无法理解编码！

我是新来的...我试图搜索此问题是否曾被问过，但找不到任何东西。如果我加倍，我会道歉。希望不是！

无论如何，我想在HTML列表上对我的整个电影收藏进行编目，所以我可以在我的三星Galaxy Tab 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上编辑，因此无法在线获取。问题：我设法让它看起来“OK”，但是当我点击向下箭头时，它们会一起改变方向，这是一种皇家的痛苦。我只想在我试图扩展的行上专门更改向下箭头，而不是所有这些！

我的心告诉我，我的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>

这是我的JavaScript代码：（scripts.js）

$(function() {
    $("td[colspan=10]").find("p").hide();
    $("table").click(function(event) {
        event.stopPropagation();
        var $target = $(event.target);
        if ( $target.closest("td").attr("colspan") > 1 ) {
            $target.slideUp();
            $target.closest("arrow").prev().find("td:first").html("+");
        } else {
            $target.closest("tr").next().find("p").slideToggle();
            if ($target.closest("arrow").find("td:first").html() == "+")
                $target.closest("up").find("td:first").html("-");
            else
                $target.closest("arrow").find("td:first").html("+");

                $(this).find(".arrow").toggleClass("up");                
        }                    
    });
});

这是我的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; 
 }

请帮忙！任何有用的建议，以修复这些讨厌的上/下箭头将非常感谢！

格斯。

“帮助我Obi-Wan Kenobi，你是我唯一的希望！”

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

0 个答案: