在 JS、CSS 和 HTML 之间显示/隐藏功能答案

【问题标题】：Show/Hide function between JS, CSS, and HTML在 JS、CSS 和 HTML 之间显示/隐藏功能
【发布时间】：2014-01-01 14:46:03
【问题描述】：

我想先声明一下，我不是本网站的原作者。我是我的个人网站 www.benjamindisinger.com 的所有者，我在页面上的视频下方遇到了显示/隐藏功能的问题。我在 JS 和 CSS 方面的经验非常少，所以在我尝试解释我认为正在发生的事情时，请耐心等待。

原作者为我的页面编写了 4 个视频（除了 Linkin Park 之外的所有视频），但我想在完成后继续随意添加视频，以便我的工作保持最新。

新视频是第三个，林肯公园的第一个。如果您注意到我的其他视频，则信息会通过“更多信息”显示/隐藏功能隐藏在每个视频下方。

我正在尝试向 Linkin Park 视频添加相同的功能，但我遇到了各种错误。

这是我的 CSS。请注意，我自己在#show_hide5 和#slidingDiv5 中添加了它们，并且它们在原作者的代码中不存在-

/* CSS Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,    td {margin:0;padding:0;}
html,body {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img { border:0;}
input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px;}
address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}

/*General CSS*/

body{
color: #333333;
background-color: #fefefe;

/*
/* IE10 Consumer Preview 
background-image: -ms-linear-gradient(left, #F6F6F6 0%, #E0E0E0 100%);

/* Mozilla Firefox 
background-image: -moz-linear-gradient(left, #F6F6F6 0%, #E0E0E0 100%);

/* Opera 
background-image: -o-linear-gradient(left, #F6F6F6 0%, #E0E0E0 100%);

/* Webkit (Safari/Chrome 10) 
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #F6F6F6), color-stop(1, #E0E0E0));

/* Webkit (Chrome 11+) 
background-image: -webkit-linear-gradient(left, #F6F6F6 0%, #E0E0E0 100%);

/* W3C Markup, IE10 Release Preview  
background-image: linear-gradient(to right, #F6F6F6 0%, #E0E0E0 100%);    */
}

#wrapper {
max-width: 1000px;
min-height: 500px;
margin: 20px auto 5px auto;
}

hr {
height: 1px;
background: #aaaaaa;
margin-top: 35px;
margin-bottom: 35px;
}




/*Text Styling*/
a:link {
color: #333;
}

a:visited {
color: #333;
}

a:hover {
color:#c4282c;
}

a {
text-decoration: none;
}

a.nodec:hover{
color: #333;
}

a.home:link {
color: #9b9b9b;
}

a.home:visited{
color: #9b9b9b;
}

a.home:hover{
color: #9b9b9b;
}

a.anhor{
postion: relative;
}

h1 {
text-align: center;
font-size: 5em;
}

span.red{
color: #c4282c;
}

h3 {
display: inline;
}

*{
font-family: "Century Gothic", Futura, arial, sans-serif;

}

p#right,p#left{
text-align: center;
font-size: 0.75em;
}
#name{
font-weight: 100;
letter-spacing: 0.08em;
}



/*Header*/

#header{
padding-top: 5px;
}

#nav {
text-align: center;
}

#nav ul li{
display: inline;
padding-right: 100px;
padding-left: 100px;
font-size: 1.3em;
}


/*Content*/

#content{
width: 1000px;
min-height: 400px;
margin-bottom: 15px;
}

.center {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
}

p.center{
padding-top: 5px;
}

.photo{
margin-top: 25px;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 48%;

}

iframe{
margin-bottom: 20px;
}

.button{
margin-top: 10px;
height: 25px;
width: 90px;
margin: auto;
text-align: center;
border-radius: 5px;
border: none;
background-color: #aaa;
}

.button:hover{
background-color: #cfcfcf;
}



.flickr{
margin-top: 20px;
height: 25px;
width: 120px;
margin: auto;
text-align: center;
border-radius: 5px;
border: none;
background-color: #aaa;
}

.flickr:hover{
background-color: #cfcfcf;
}

.shadbox{
margin-left: 8px;
margin-right: 8px;
padding-top: 35px;
}




.about{
line-height: 1.3;
font-weight: 400;
margin: 15px 50px;
text-align: center;

}


#slidingDiv, #slidingDiv2, #slidingDiv3, #slidingDiv4, #slidingDiv5 {
margin-top: 10px;

text-align: center;
margin-left: auto;
margin-right: auto;
}

#slidingDiv {
height: 350px;
}

#slidingDiv2 {
height: 375px;
}

#slidingDiv3 {
height:280px;
}

#slidingDiv4 {
height:100px;
}

#slidingDiv5 {
height:100px;
}

#show_hide, #show_hide2, #show_hide3, #show_hide4, #show_hide5, {
display:none;
}

.laurels{
margin: 7px 15px;
}



/*Footer*/

#footer{
margin-bottom: 75px;
margin-top: -25px;
}

#left{
width: 50%;
float: left;
}

#right{
width: 50%;
float: left;
}

这是我的 showhide.js 文件。同样，我在显示/隐藏 5 部分中添加了内容。我的网站 www.benjamindisinger.com 上的当前代码不包含代码的显示/隐藏 5 部分。当我包含它时，它会破坏所有其他显示/隐藏按钮。它们都出现而不是被隐藏，并且按钮不再起作用。在我弄清楚这一点时，为了美观起见，代码不包含在当前站点中。在“.click(function(X){”代码旁边，我为显示/隐藏 5 随机分配了“d”。我不确定这是做什么的。请告知。

//show/hide 1
    $(document).ready(function(){

        $("#slidingDiv").hide();
        $("#show_hide").show();

        $('#show_hide').click(function(a){
            a.preventDefault();
        $("#slidingDiv").slideToggle();
        });

    });

//show/hide 2

$(document).ready(function(){

        $("#slidingDiv2").hide();
        $("#show_hide2").show();

        $('#show_hide2').click(function(b){
            b.preventDefault();
        $("#slidingDiv2").slideToggle();
        });

    });



//show/hide 3

$(document).ready(function(){

        $("#slidingDiv3").hide();
        $("#show_hide3").show();

        $('#show_hide3').click(function(c){
            c.preventDefault();
        $("#slidingDiv3").slideToggle();
        });

    });



//show/hide 4


$(document).ready(function(){

        $("#slidingDiv4").hide();
        $("#show_hide4").show();

        $('#show_hide4').click(function(e){
            e.preventDefault();
        $("#slidingDiv4").slideToggle();
        });

    });



//show/hide 5


$(document).ready(function(){

        $("#slidingDiv5”).hide();
        $("#show_hide5”).show();

        $('#show_hide5’).click(function(d){
            d.preventDefault();
        $("#slidingDiv5”).slideToggle();
        });

    });

最后，这是我的 HTML。有问题的代码大约在中途。同样，slidingDiv5 和 show_hide5 的所有内容都是新的。现在这是我真的不明白的事情。超链接没有居中，也没有像正上方的另一行“由 Benjamin Disinger 和 Bogdan Ciornei 创建”那样隐藏。此外，无论出于何种原因，如果我删除超链接代码，它会删除它下面的视频（Glossolalia）。我不明白如何删除另一段代码中的 youtube 超链接会以某种方式删除其下方不相关的视频。

<!DOCTYPE html>

<html>
<head>

<title>The Official Site of Benjamin Disinger</title>
<meta name=“description” content=“Official site for filmmaker Benjamin Disinger. Featuring videos for Manchester Orchestra, Hammock, and Linkin Park, as well as films, ‘Someday, You’ll Remember Today’ and ‘Dust.’”
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<link rel="stylesheet" type="text/css" href="default.css">
<link rel="icon" type="image/ico" href="favicon.ico">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script src="showhide.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
    <script type="text/javascript" src="shadowbox/shadowbox.js"></script>
    <script type="text/javascript">
        Shadowbox.init();
    </script> 

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-44218930-1', 'benjamindisinger.com');
ga('send', 'pageview');

</script>

</head>

<body>

<div id="wrapper">

<div id="header">
    <h1 id="name">
        <a href="index.html" class="home"><img alt="Benjamin Disinger" src="media/header_spaced.png"></a>
    </h1>
<hr />

    <div id="nav">
        <ul>
            <li><a href="index.html">FILM</a></li>
            <li><a href="photo.html">PHOTOGRAPHY</a></li>
            <li><a href="about.html">ABOUT</a></li>
        </ul>
    </div>


</div>

<hr />

<div id="content">

    <iframe class="center" src="http://player.vimeo.com/video/26596218?portrait=0" width="900" height="383" frameborder="0"
        webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    <div class="button"><a href="#" class="nodec" id="show_hide"><p class="center">More Info</p></a></div>
    <div id="slidingDiv">

        <p>Written/Directed by Benjamin Disinger</p>
        <p>VFX by Bogdan Ciornei</p>
    <p class="about"><a rel="shadowbox[virgin];width=1200;height=1350;" href="media/virgin/virgin_credits_v3.pdf">Full Cast/Crew</p></a>
        <br />

        <p>Starring Chris Montgomery, George Sander, Kristen Farrell, Luke and Marin Medina</p>

        <br />

        <img src="media/virgin/buffaloniagara.png" width="150" height="98" class="laurels" />
        <img src="media/virgin/LAMVF.png" width="150" height="98" class="laurels" />
        <img src="media/virgin/snob.png" width="150" height="98" class="laurels" />
        <br />
        <img src="media/virgin/independents.png" width="150" height="98" class="laurels" />
        <img src="media/virgin/reelfilm.png" width="150" height="98" class="laurels" />


    </div>
    <br /><br /><br />


    <iframe class="center" src="http://player.vimeo.com/video/41286241?color=f7f3f2" width="900" height="383" frameborder="0"
    webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    <div class="button"><a href="#" class="nodec" id="show_hide2"><p class="center">More Info</p></a></div>
    <div id="slidingDiv2">

        <p>Produced by Breeanne Murcko</p>
        <p>Written/Directed by Benjamin Disinger</p>
        <p>VFX by Bogdan Ciornei</p>
        <p class="about"><a rel="shadowbox[someday];width=1200;height=1700;" href="media/someday/someday_credits_v6.pdf">Full Cast/Crew</p></a>  
        <br />

        <p>Starring Patrick Dodge and Jessica Francis</p>


        <br />

        <img src="media/someday/hollyshorts.png" width="150" height="98" class="laurels" />
        <img src="media/someday/okanagan.png" width="150" height="98" class="laurels" />
        <img src="media/someday/independents.png" width="150" height="98" class="laurels" />
        <br />
        <img src="media/someday/sanjose.png" width="150" height="98" class="laurels" />
        <img src="media/someday/maverick.png" width="150" height="98" class="laurels" />




    </div>
<br /><br /><br />

    <iframe class="center" src="//player.vimeo.com/video/82422989" width="900" height="383" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <div class="button"><a href="#" class="nodec" id="show_hide5”><p class="center">More Info</p></a></div>
    <div id="slidingDiv5”>

        <p>Created by Benjamin Disinger and Bogdan Ciornei</p>
        <p><a href="http://youtu.be/TiCnjKlCWH8">Linkin Park’s Official YouTube Link</a></p>


    </div>
    <br /><br /><br />

    <iframe class="center" src="http://player.vimeo.com/video/70754486" width="900" height="383" frameborder="0"
        webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    <div class="button"><a href="#" class="nodec" id="show_hide4"><p class="center">More Info</p></a></div>
    <div id="slidingDiv4">

        <p>Written/Directed by Benjamin Disinger</p>
        <p>VFX by Bogdan Ciornei</p>
    <p class="about"><a rel="shadowbox[gloss];width=1200;height=700;" href="media/glossolalia/gloss_credits_v2.pdf">Full Cast/Crew</p></a> 
        <br />

        <p>Starring Kellie and Rusty Burns</p>


    </div>
    <br /><br /><br />


    <iframe class="center" src="http://player.vimeo.com/video/72307187" width="900" height="383" frameborder="0"
        webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    <div class="button"><a href="#" class="nodec" id="show_hide3"><p class="center">More Info</p></a></div>
    <div id="slidingDiv3">


        <p>Produced by Aaron Gordon, Alex Pagliaro</p>
        <p>Written/Directed by Benjamin Disinger</p>
        <p>VFX by Bogdan Ciornei</p>
    <p class="about"><a rel="shadowbox[dust];width=1200;height=2200;" href="media/dust/dust_credits_v3.pdf">Full Cast/Crew</p></a> 
        <br />

        <p>Starring George Sander, Lea Mancarella, Sam Fisher, Kenton Cummings</p>
        <br />

    <img src="media/dust/snob.png" width="150" height="98" class="laurels" />




        <p>Not yet released.</p>




    </div>
    <br /><br />





</div>

<hr /> 

<div id="footer">
    <p id="left">
        All Videos Copyright of Benjamin Disinger <br />
    </p>

    <p id="right">
        <a href="mailto:BenDisinger@gmail.com">
        BenDisinger@gmail.com
        </a>
    </p>

</div>

</div>

</body>

</html>

希望我已经足够清楚地解释了自己。我并不完全有信心。

回顾一下：我希望 Linkin Park 视频下方的显示/隐藏功能能够正常工作。任何涉及 show_hide5 和slidingDiv5 的都是有问题的代码。

谢谢！

-本

编辑 1：

感谢 AppleNaveeN 的回复！不幸的是，它不起作用（或者我错误地实现了它）。

我更改了我的 JS、HTML 和 CSS 来代表您的建议。不幸的是，我的网站现在看起来像这样，www.benjamindisinger.com，所有按钮再次损坏，一切都可见。 ![有改动][1][1]：http://i.stack.imgur.com/gYEPZ.png

这是更改后的 HTML -

<iframe class="center" src="http://player.vimeo.com/video/26596218?portrait=0" width="900" height="383" frameborder="0"
        webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    <div class="button"><a href="#" class="nodec show_hide” id="show_hide"><p class="center">More Info</p></a></div>
    <div id="slidingDiv" class=“slidingDiv”>

        <p>Written/Directed by Benjamin Disinger</p>
        <p>VFX by Bogdan Ciornei</p>
    <p class="about"><a rel="shadowbox[virgin];width=1200;height=1350;" href="media/virgin/virgin_credits_v3.pdf">Full Cast/Crew</p></a>
        <br />

        <p>Starring Chris Montgomery, George Sander, Kristen Farrell, Luke and Marin Medina</p>

        <br />

        <img src="media/virgin/buffaloniagara.png" width="150" height="98" class="laurels" />
        <img src="media/virgin/LAMVF.png" width="150" height="98" class="laurels" />
        <img src="media/virgin/snob.png" width="150" height="98" class="laurels" />
        <br />
        <img src="media/virgin/independents.png" width="150" height="98" class="laurels" />
        <img src="media/virgin/reelfilm.png" width="150" height="98" class="laurels" />


    </div>
    <br /><br /><br />


    <iframe class="center" src="http://player.vimeo.com/video/41286241?color=f7f3f2" width="900" height="383" frameborder="0"
    webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    <div class="button"><a href="#" class="nodec show_hide” id="show_hide2"><p class="center">More Info</p></a></div>
    <div id="slidingDiv2" class=“slidingDiv”>

        <p>Produced by Breeanne Murcko</p>
        <p>Written/Directed by Benjamin Disinger</p>
        <p>VFX by Bogdan Ciornei</p>
        <p class="about"><a rel="shadowbox[someday];width=1200;height=1700;" href="media/someday/someday_credits_v6.pdf">Full Cast/Crew</p></a>  
        <br />

        <p>Starring Patrick Dodge and Jessica Francis</p>


        <br />

        <img src="media/someday/hollyshorts.png" width="150" height="98" class="laurels" />
        <img src="media/someday/okanagan.png" width="150" height="98" class="laurels" />
        <img src="media/someday/independents.png" width="150" height="98" class="laurels" />
        <br />
        <img src="media/someday/sanjose.png" width="150" height="98" class="laurels" />
        <img src="media/someday/maverick.png" width="150" height="98" class="laurels" />




    </div>
<br /><br /><br />

    <iframe class="center" src="//player.vimeo.com/video/82422989" width="900" height="383" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <div class="button"><a href="#" class="nodec show_hide” id="show_hide5”><p class="center">More Info</p></a></div>
    <div id="slidingDiv5” class=“slidingDiv”>

        <p>Created by Benjamin Disinger and Bogdan Ciornei</p>
        <p><a href="http://youtu.be/TiCnjKlCWH8">Linkin Park’s Official YouTube Link</a></p>


    </div>
    <br /><br /><br />

    <iframe class="center" src="http://player.vimeo.com/video/70754486" width="900" height="383" frameborder="0"
        webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    <div class="button"><a href="#" class="nodec show_hide” id="show_hide4"><p class="center">More Info</p></a></div>
    <div id="slidingDiv4" class=“slidingDiv”>

        <p>Written/Directed by Benjamin Disinger</p>
        <p>VFX by Bogdan Ciornei</p>
    <p class="about"><a rel="shadowbox[gloss];width=1200;height=700;" href="media/glossolalia/gloss_credits_v2.pdf">Full Cast/Crew</p></a> 
        <br />

        <p>Starring Kellie and Rusty Burns</p>


    </div>
    <br /><br /><br />


    <iframe class="center" src="http://player.vimeo.com/video/72307187" width="900" height="383" frameborder="0"
        webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    <div class="button"><a href="#" class="nodec show_hide” id="show_hide3"><p class="center">More Info</p></a></div>
    <div id="slidingDiv3" class=“slidingDiv”>


        <p>Produced by Aaron Gordon, Alex Pagliaro</p>
        <p>Written/Directed by Benjamin Disinger</p>
        <p>VFX by Bogdan Ciornei</p>
    <p class="about"><a rel="shadowbox[dust];width=1200;height=2200;" href="media/dust/dust_credits_v3.pdf">Full Cast/Crew</p></a> 
        <br />

        <p>Starring George Sander, Lea Mancarella, Sam Fisher, Kenton Cummings</p>
        <br />

    <img src="media/dust/snob.png" width="150" height="98" class="laurels" />




        <p>Not yet released.</p>




    </div>

现在更改后的 JS 文件已删除所有其他 .slidingDiv 编号 -

//show/hide
    $(document).ready(function(){

        $(“.slidingDiv").hide();
        $(“.show_hide").show();

        $(‘.show_hide').click(function(a){
            a.preventDefault();
        $(“.slidingDiv").slideToggle();
        });

    });

最后，这是更改后的 CSS。现在这是棘手的部分。我需要不同的#slidingDiv，因为它们有不同的高度。它们对应于展开时每个“更多信息”按钮所允许的空间。有些视频的内容比其他视频多，这就是我处理所需空间的方式。

#slidingDiv, #slidingDiv2, #slidingDiv3, #slidingDiv4, #slidingDiv5 {
margin-top: 10px;

text-align: center;
margin-left: auto;
margin-right: auto;
}

#slidingDiv {
height: 350px;
}

#slidingDiv2 {
height: 375px;
}

#slidingDiv3 {
height:280px;
}

#slidingDiv4 {
height:100px;
}

#slidingDiv5 {
height:100px;
}

#show_hide {
display:none;
}

请指教。

-本

【问题讨论】：

有一段时间，您应该已经向我们提供了您网站的网址。使用此代码，问题无法正确显示。
URL 有问题
这是 CSS 文件、JS 文件和 HTML 文件的完整代码。只要您让我知道您在寻找什么，我就可以提供任何其他可能相关的信息。我的网址是 www.benjamindisinger.com。它目前运行几乎正确，因为我没有上传显示/隐藏 5 JS 文件，因为它破坏了所有“更多信息”按钮。如果你愿意，我可以上传一会儿？
您需要使用类而不是 ID，否则每次添加视频时都必须在脚本和 css 中添加代码

标签： javascript css html

【解决方案1】：

您需要将 JavaScript 代码更改为以下一个函数 (showhide.js)

删除所有函数然后编写这个函数

使用类而不是 ID。 //显示隐藏 $(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function(a){
        a.preventDefault();
    $(".slidingDiv").slideToggle();
    });

});

那么，

HTML 中的小改动示例：（视频一）

<div class="button"><a href="#" class="nodec show_hide" id="show_hide5”><p class="center">More Info</p></a></div>
<div id="slidingDiv5” class="slidingDiv">

    <p>Created by Benjamin Disinger and Bogdan Ciornei</p>
    <p><a href="http://youtu.be/TiCnjKlCWH8">Linkin Park’s Official YouTube Link</a></p>


</div>
<br /><br /><br />

我在“show_hide5”ID 处添加了“show_hide”类并且，在“slidingDiv5”ID 处添加了“slidingDiv”类

因此，最后您无需为每个新视频一次又一次地添加 JavaScript 代码。它将用于您的所有视频。

【讨论】：

我对我的代码进行了修改，但它仍然无法正常运行。我用更新的代码编辑了我的原始帖子。谢谢！
我刚刚看到你的网站。一切都是正确的。但是，有一些特殊字符，例如““slidingDiv”。请删除它们，您的问题将解决。您可以在网络浏览器中找到他们查看源代码。
请看这段代码 "nodec show_hide" id="slidingDiv2" class="slidingDiv" 这里"和"是不同的。请将两者都更改为“。您的问题将得到解决。
有效！我不确定引号是如何从“变为”的，老实说，我不确定如何自然地键入它。我复制/粘贴了正确的引号以使其工作。我在 TextEdit 中编码mac。有什么建议吗？另外，我必须做出改变。引用解决了林肯公园视频下方文本的问题，并隐藏了所有信息，以便它看起来正确，但是，如果我点击“更多信息”按钮在单个视频上，它会打开所有视频下的所有按钮。为了解决这个问题，我再次用 5 个单独的函数替换了 JS 文件。这修复了它！