当前位置： 文江博客 话题详情

想要：可以显示三角形
的简单 HTML 文件隐藏/显示

发布于 2024-10-21 08:13:47 字数 152 浏览 3 评论 0 原文

我有一个可以生成文本报告的程序。我希望它制作一个包含多个显示三角形的 HTML 报告，这样当您单击三角形时，报告的更多内容就会显示或隐藏。我同意将 JavaScript 嵌入到文件中，但我真的希望将其全部放在一个文件中，而不需要其他文件。有没有一种简单的方法可以使用现代浏览器来做到这一点？

原文

I have a program that produces a text report. I want it to make an HTML report with multiple disclosure triangles, so that when you click a triangle more of the report shows or hides. I am okay with embedding JavaScript inside the file, but I really want it all in a single file, with no additional files. Is there an easy way to do this with modern browsers?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

吹泡泡o 2024-10-28 08:13:47

如果您不关心与 Internet Explorer 的兼容性，可以使用 html 标记： http:// www.w3schools.com/tags/tag_details.asp

这是一种制作披露三角形原型的非常快速的方法。
例如：

<details>
  <summary>The contents of the summary tag is always visible</summary>
  <p>Everything else inside the details tag will be hidden in a disclosure triangle</p>
</details>

If you don't care about compatibility with Internet Explorer, you could use the html tag: http://www.w3schools.com/tags/tag_details.asp

Its a very quick way to prototype disclosure triangles.
For example:

<details>
  <summary>The contents of the summary tag is always visible</summary>
  <p>Everything else inside the details tag will be hidden in a disclosure triangle</p>
</details>
回复 原文
挽手叙旧 2024-10-28 08:13:47

最简单的方法是这样的：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style>.wrapper div { display:none;}</style>
<script>
  $(function() {
     $('.wrapper h2').click(function() { $(this).next().toggle();}); 
  });
 </script>
</head>
<body>
<div class="wrapper">
    <h2>Example header 1</h2>
    <div>bodytext 1</div>
</div>
<div class="wrapper">
    <h2>Example header 2</h2>
    <div>bodytext 2</div>
</div>
<div class="wrapper">
    <h2>Example header 3</h2>
    <div>bodytext 3</div>
</div>
</body>
</html>

我在这里做了一个简单的工作示例： http://jsfiddle.net/NXuQt /1/

它并不漂亮，但应该为您提供所需的简单模板。

请注意，在这个解决方案中，整个标题是可点击的...我认为添加图像并将其作为点击事件的一部分进行更改是您可以自行处理的事情，否则请告诉我:)

注意：javascript 是基于 jQuery 库的包含。

编辑：我更新了复制/粘贴就绪工作代码的答案，您无法使其按原样工作的原因是因为我只从小提琴示例中获取了要点。小提琴自动在 DOMready 上运行点击处理程序初始化，更新的示例现在已经内置了:)

The simplest way is something like this:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style>.wrapper div { display:none;}</style>
<script>
  $(function() {
     $('.wrapper h2').click(function() { $(this).next().toggle();}); 
  });
 </script>
</head>
<body>
<div class="wrapper">
    <h2>Example header 1</h2>
    <div>bodytext 1</div>
</div>
<div class="wrapper">
    <h2>Example header 2</h2>
    <div>bodytext 2</div>
</div>
<div class="wrapper">
    <h2>Example header 3</h2>
    <div>bodytext 3</div>
</div>
</body>
</html>

I have made a simple working example here: http://jsfiddle.net/NXuQt/1/

It isn't pretty but should give you the simple template you need.

Note that in this solution, the entire header is click-able... I figure adding an image and changing it as part of the click event is something you can take care of yoruself, otherwise let me know :)

Note: The javascript is based on the inclusion of the jQuery library.

EDIT: I updated the answer to copy/paste ready working code, the reason you couldn't make it work as it was, was because i had only taken the essentials from the fiddle example. The fiddle automatically ran the click handler initialization at DOMready, which the updated example now has built in :)

回复 原文
心凉 2024-10-28 08:13:47

对于直接的 HTML，不行。那不是它的目的。您将需要使用脚本语言，很可能是 JavaScript 或 VBScript。

这是我过去使用过的脚本（不是我的，但我没有原始的 URI）：

var timerlen = 5;
var slideAniLen = 250;

var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();

function slidedown(objname)
{
    if(moving[objname])
        return;

    if(document.getElementById(objname).style.display != "none")
        return; // cannot slide down something that is already visible

    moving[objname] = true;
    dir[objname] = "down";
    startslide(objname);
}

function slideup(objname)
{
    if(moving[objname])
        return;

    if(document.getElementById(objname).style.display == "none")
        return; // cannot slide up something that is already hidden

    moving[objname] = true;
    dir[objname] = "up";
    startslide(objname);
}

function startslide(objname)
{
    obj[objname] = document.getElementById(objname);

    endHeight[objname] = parseInt(obj[objname].style.height);
    startTime[objname] = (new Date()).getTime();

    if(dir[objname] == "down")
    {
        obj[objname].style.height = "1px";
    }

    obj[objname].style.display = "block";

    timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen);
}

function slidetick(objname)
{
    var elapsed = (new Date()).getTime() - startTime[objname];

    if (elapsed > slideAniLen)
    {
        endSlide(objname)
    }
    else 
    {
        var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
        if(dir[objname] == "up")
            d = endHeight[objname] - d;

        obj[objname].style.height = d + "px";
    }

    return;
}

function endSlide(objname)
{
    clearInterval(timerID[objname]);

    if(dir[objname] == "up")
        obj[objname].style.display = "none";

    obj[objname].style.height = endHeight[objname] + "px";

    delete(moving[objname]);
    delete(timerID[objname]);
    delete(startTime[objname]);
    delete(endHeight[objname]);
    delete(obj[objname]);
    delete(dir[objname]);

    return;
}

function toggleSlide(objname)
{
    if(document.getElementById(objname).style.display == "none")
    {
        // div is hidden, so let's slide down
        slidedown(objname);
    }
    else
    {
        // div is not hidden, so slide up
        slideup(objname);
    }
}

您可以将对toggleSlide() 的调用分配给要切换的元素的 onclick() 事件。

With straight HTML, no. That's not what it's for. You will need to use a scripting language, either JavaScript or VBScript, most likely.

This is a script I've used in the past (not mine, but I don't have the URI of the original):

var timerlen = 5;
var slideAniLen = 250;

var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();

function slidedown(objname)
{
    if(moving[objname])
        return;

    if(document.getElementById(objname).style.display != "none")
        return; // cannot slide down something that is already visible

    moving[objname] = true;
    dir[objname] = "down";
    startslide(objname);
}

function slideup(objname)
{
    if(moving[objname])
        return;

    if(document.getElementById(objname).style.display == "none")
        return; // cannot slide up something that is already hidden

    moving[objname] = true;
    dir[objname] = "up";
    startslide(objname);
}

function startslide(objname)
{
    obj[objname] = document.getElementById(objname);

    endHeight[objname] = parseInt(obj[objname].style.height);
    startTime[objname] = (new Date()).getTime();

    if(dir[objname] == "down")
    {
        obj[objname].style.height = "1px";
    }

    obj[objname].style.display = "block";

    timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen);
}

function slidetick(objname)
{
    var elapsed = (new Date()).getTime() - startTime[objname];

    if (elapsed > slideAniLen)
    {
        endSlide(objname)
    }
    else 
    {
        var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
        if(dir[objname] == "up")
            d = endHeight[objname] - d;

        obj[objname].style.height = d + "px";
    }

    return;
}

function endSlide(objname)
{
    clearInterval(timerID[objname]);

    if(dir[objname] == "up")
        obj[objname].style.display = "none";

    obj[objname].style.height = endHeight[objname] + "px";

    delete(moving[objname]);
    delete(timerID[objname]);
    delete(startTime[objname]);
    delete(endHeight[objname]);
    delete(obj[objname]);
    delete(dir[objname]);

    return;
}

function toggleSlide(objname)
{
    if(document.getElementById(objname).style.display == "none")
    {
        // div is hidden, so let's slide down
        slidedown(objname);
    }
    else
    {
        // div is not hidden, so slide up
        slideup(objname);
    }
}

You would assign a call to toggleSlide() to the onclick() event of the element you want to toggle.

回复 原文
梦途 2024-10-28 08:13:47

CSS:

.hidden {
    display: none;
}

Javascript:

function createSection(section, hidden) {
    var triangle = section.children[0]; // assumes the triangle image is the first child of a section (see HTML)
    var contents = section.children[1];
    triangle.onclick = function() {
        if (contents.className.indexOf("hidden") != -1) { // the section is hidden
            contents.className = contents.className.replace("hidden", "");
        } else { // the section wasn't hidden
            contents.className += " hidden";
        }
    }
    if (hidden) {
        contents.className += " hidden";
    }
}

    // Create the sections when window loads
window.onload = function() {
    createSection(document.getElementById("section1"));
    createSection(document.getElementById("section2"), true);
}

HTML:

<div id="section1">
    <img src="triangle.jpg"></img>
    <div>This is the section content</div>
</div>
<div id="section2">
    <img src="triangle.jpg"></img>
    <div>this section is hidden by default</div>
</div>

显然你必须将一些东西更改为你自己的 html 文件

CSS:

.hidden {
    display: none;
}

Javascript:

function createSection(section, hidden) {
    var triangle = section.children[0]; // assumes the triangle image is the first child of a section (see HTML)
    var contents = section.children[1];
    triangle.onclick = function() {
        if (contents.className.indexOf("hidden") != -1) { // the section is hidden
            contents.className = contents.className.replace("hidden", "");
        } else { // the section wasn't hidden
            contents.className += " hidden";
        }
    }
    if (hidden) {
        contents.className += " hidden";
    }
}

    // Create the sections when window loads
window.onload = function() {
    createSection(document.getElementById("section1"));
    createSection(document.getElementById("section2"), true);
}

HTML:

<div id="section1">
    <img src="triangle.jpg"></img>
    <div>This is the section content</div>
</div>
<div id="section2">
    <img src="triangle.jpg"></img>
    <div>this section is hidden by default</div>
</div>

Obviously you would have to change some things to your own html file

回复 原文
你丑哭了我 2024-10-28 08:13:47

好吧，经过一些摆弄，我能够使用我在 switchcontent.js 和 switchicon.js javascript 文件创建一个可以执行我想要的操作的文件="http://www.dynamicdrive.com/dynamicindex17/switchcontent2.htm" rel="nofollow">http://www.dynamicdrive.com/dynamicindex17/switchcontent2.htm

这是我的代码，基于编辑关闭他们的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Drive DHTML scripts- Switch Content Script II (icon based)</title>
<script type="text/javascript" src="switchcontent.js" ></script>
<script type="text/javascript" src="switchicon.js"></script>
<style type="text/css">
/* Specifies title style */
.iconspan{
  margin: 3px;
  cursor:hand;
  cursor:pointer;
  font-weight: bold;
}
</style>
</head>
<body>
<span id="faqtable1-title" class="iconspan"></span>
How hot is our Sun?<br/>
<div id="faqtable1" class="icongroup2">
The surface of the Sun is around 5800 Kelvin, while the core reaches over 15 million Kelvin.
</div>
<br>

<span id="faqtable2-title" class="iconspan"></span>
How big is our Sun in terms of mass?  <br/>
<div id="faqtable2" class="icongroup2">
The contains more than 99.8% of the total mass of our Solar System.
</div>
<script type="text/javascript">
var faqtable=new switchicon("icongroup2", "div") 
faqtable.setHeader('▼', '▶') //Set header HTML
faqtable.collapsePrevious(false) //Allow more than 1 content to be open simultanously
faqtable.setPersist(true, 7) //Enable persistence to remember last switch content states for 7 days
faqtable.init()
</script>
</body>
</html>

关闭时看起来像这样：

▶ How hot is our Sun?
▶ How big is our Sun in terms of mass?

打开时看起来像这样：

▼ How hot is our Sun?
The surface of the Sun is around 5800 Kelvin, while the core reaches over 15 million Kelvin.
▼ How big is our Sun in terms of mass? 
The contains more than 99.8% of the total mass of our Solar System.

Well, after some fiddling around, I was able to make a file that does what I want using the switchcontent.js and switchicon.js javascript files I found at http://www.dynamicdrive.com/dynamicindex17/switchcontent2.htm

Here's my code, based on editing down theirs:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Drive DHTML scripts- Switch Content Script II (icon based)</title>
<script type="text/javascript" src="switchcontent.js" ></script>
<script type="text/javascript" src="switchicon.js"></script>
<style type="text/css">
/* Specifies title style */
.iconspan{
  margin: 3px;
  cursor:hand;
  cursor:pointer;
  font-weight: bold;
}
</style>
</head>
<body>
<span id="faqtable1-title" class="iconspan"></span>
How hot is our Sun?<br/>
<div id="faqtable1" class="icongroup2">
The surface of the Sun is around 5800 Kelvin, while the core reaches over 15 million Kelvin.
</div>
<br>

<span id="faqtable2-title" class="iconspan"></span>
How big is our Sun in terms of mass?  <br/>
<div id="faqtable2" class="icongroup2">
The contains more than 99.8% of the total mass of our Solar System.
</div>
<script type="text/javascript">
var faqtable=new switchicon("icongroup2", "div") 
faqtable.setHeader('▼', '▶') //Set header HTML
faqtable.collapsePrevious(false) //Allow more than 1 content to be open simultanously
faqtable.setPersist(true, 7) //Enable persistence to remember last switch content states for 7 days
faqtable.init()
</script>
</body>
</html>

It looks like this when closed:

▶ How hot is our Sun?
▶ How big is our Sun in terms of mass?

And this when opened:

▼ How hot is our Sun?
The surface of the Sun is around 5800 Kelvin, while the core reaches over 15 million Kelvin.
▼ How big is our Sun in terms of mass? 
The contains more than 99.8% of the total mass of our Solar System.
回复 原文
~没有更多了~

关于作者

凡尘雨

暂无简介

文章
评论
912 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文