Javascript 显示/隐藏JS、CSS和HTML之间的函数

我想先说一句，我不是这个网站的原作者。我是我个人网站www.benjamidinger.com的所有者，我的页面视频下方的显示/隐藏功能出现了问题。我在JS和CSS方面的经验非常少，所以在我试图解释我认为正在发生的事情时，请耐心听我说

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

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

我试图将相同的功能添加到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文件。同样，我在show/hide 5部分中添加了。我的网站www.benjamindinger.com上的当前代码没有显示/隐藏代码的5部分。当我包含它时，它会打断所有其他显示/隐藏按钮。它们都会出现，而不是隐藏，并且按钮不再工作。为了美观起见，在我弄明白这一点的时候，代码没有包含在当前站点中。在“.click（function（X）{”代码旁边，我随机为show/hide 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 Desiger和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>

最后，这里是更改后的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;
}

请告知

//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();
        });

    });

---

-Ben

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

删除所有函数，然后编写此函数

使用类而不是ID。 //显示/隐藏 $（文档）.ready（函数（）{

那么

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

有一段时间，你应该给我们你网站的url。有了这个代码，问题就不那么明显了。这个url是有问题的，虽然这是CSS文件、JS文件和HTML文件的完整代码。我可以提供任何可能相关的东西，只要你告诉我你在找什么。我的url是www.benjaminsin它目前运行几乎正常，因为我没有上传show/hide 5 JS文件，因为它破坏了所有的“更多信息”按钮。我可以上传一会儿，如果你愿意的话？你需要使用类而不是ID，否则每次你添加视频时都必须在脚本和css中添加代码。我对代码进行了修改，但仍然无法正常运行。我用更新的代码编辑了我的原始帖子。谢谢！我刚刚看到了你的网站。一切正常等等。但是，有一些特殊字符，如“slidingDiv”。请删除它们，您的问题就会解决。您可以在web浏览器中找到它们的查看源。请查看此代码“nodec show_hide”id=“slidingDiv2”class=“slidingDiv”和“此处不同。请将两者更改为”“。你的问题会解决的。它有效！我不确定报价是如何从"“而且，老实说，我不确定如何自然地键入。我复制/粘贴了正确的引文以使其正常工作。我正在mac上使用TextEdit进行编码。有什么建议吗？此外，我必须进行更改。引文修复了Linkin Park视频下方文本的问题，并隐藏了所有信息，以便在我点击t时看起来是正确的他在一个视频上的“更多信息”按钮会打开所有视频下的所有按钮。为了解决这个问题，我再次用5个单独的函数替换了JS文件。这就解决了它！
#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;
}

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

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

}); 

<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 />