Question

当我们显示隐藏内容时，我正在构建一个带有箭头标记活动部分的网站。我希望当活动部分显示其内容时，这些箭头是永久性的，但是当它点击时它只是闪烁。我试过玩过这个位置，溢出，但没有任何效果。

以下是网站：http://www.palcco.com.br/ftp/bucker

HTML：

<section id="about">
  <section class="container">   
   <h2>Quem Somos</h2>
   <p>Institucional: Lorem Ipsum é simplesmente uma simulação de texto da indústria...</p>     

   <section class="content_box"><a class="show_hide" href="#" rel="#conteudo_about1">
    <img src="img/icone_missao.fw.png" alt="Missão">
   </a>
    <div id="conteudo_about1" class="toggleDiv">
    <p>Institucional: Lorem Ipsum é simplesmente uma simulação de texto da indústria...</p> 
    </div>
   </section>

   <section class="content_box"><a class="show_hide" href="#" rel="#conteudo_about2">
    <img src="img/icone_visao.fw.png" alt="Visão">
   </a>
   <div id="conteudo_about2" class="toggleDiv">
    <p>Institucional: Lorem Ipsum é simplesmente uma simulação de texto da indústria...</p> 
   </div>
   </section>

   <section class="content_box"><a class="show_hide" href="#" rel="#conteudo_about3">
    <img src="img/icone_objetivo.fw.png" alt="Objetivo Empresarial">
   </a>
   <div id="conteudo_about3" class="toggleDiv">
    <p>Institucional: Lorem Ipsum é simplesmente uma simulação de texto da indústria...</p> 
    </div>
   </section>

   <section class="content_box"><a class="show_hide" href="#" rel="#conteudo_about4">
    <img src="img/icone_equipe.fw.png" alt="Equipe">
   </a>
   <div id="conteudo_about4" class="toggleDiv">
    <p>Institucional: Lorem Ipsum é simplesmente uma simulação de texto da indústria...</p> 
   </div>
   </section><!--conteudo_about-->
  </section><!--container-->
 </section><!--about-->

CSS：

#about{
    width:100%;
    min-height:300px;
    float:left;
    background:#E5E5E5;
    margin-top:0;
} 

#about h2{
    color:#004179;
    margin-bottom:20px;
}

#about p,
#conteudo_about p,
#conteudo_about2 p,
#conteudo_about3 p,
#conteudo_about4 p{
    font-size:12px;
    color:#4C4C4C;
    text-align:justify;
}

.content_box{
    width:200px;
    /*height:200px;*/
    display:block;
    float:left;
    background:#E5E5E5;
    margin-right:53px;
    position:relative;
}

.content_box:active:after{
    content:'';
    width:0;
    height:0;
    position:absolute;
    border:20px solid transparent;
    border-top-color:#fff;
    top:100%;
    left:40%;
    z-index:1;
}

.content_box:last-child{
    margin-right:0 !important;
}


#conteudo_about1, #conteudo_about2, #conteudo_about3, #conteudo_about4{
    width:960px;
    background-color: #656565;
    padding:51px 20px;
    /*margin-top:10px;
    border-bottom:5px solid #3399FF;*/
    display:none ;
    position:relative;
    left:-10%;
    top:0px;
    box-shadow:174px 0px 0px 0px #656565, -174px 0px 0px 0px #656565;
    z-index:1;
}

任何guidanbce都会被贬低。提前谢谢！

Answer 1

我试过这个：

$('.classeDoBotao').click(function() {
    var target = $(this).data('target');
    if (target.is(':visible')) {
        target.slideUp('fast');
    }
    else {
        target.slideDown('fast');
    }
});

HTML：

<a href class='classeDoBotao' data-target='#conteudo_about1'> ... </a>

我设定了＆＃39;＃conteudo_about1＆＃39;相对的，但我没有工作，因为更改数据目标的href不会显示隐藏的内容。

指向箭头在活动元素上消失

1 个答案: