Question

我想通过说我不本网站的原作者来作为序言。我是我的个人网站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文件。再次，我在show / hide 5部分添加了。我网站上的当前代码www.benjamindisinger.com没有显示/隐藏代码的5部分。当我包含它时，它会打破所有其他显示/隐藏按钮。它们都显示而不是隐藏，按钮不再起作用。为了便于出现，我想出来了，代码不包含在当前网站中。旁边的“.click（函数（X）{”代码我随机分配了“d”用于显示/隐藏5.我不确定这是做什么的。请告知。

//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 / hide能够正常工作。涉及show_hide5和slidingDiv5的任何内容都是有问题的代码。

谢谢！

-Ben

编辑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's，因为它们有不同的高度。它们对应于扩展时每个“更多信息”按钮所允许的空间。有些视频比其他视频更多，这就是我处理所需空间的方式。

#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;
}

请指教。

-Ben

Answer 1

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

删除所有功能然后编写此功能

使用ID类别的类。 //显示隐藏 $（文件）。就绪（函数（）{

    $(".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代码。它将用于您的所有视频。

在JS，CSS和HTML之间显示/隐藏功能

1 个答案: