logo标签列表

如何使用纯HTML代码添加切换效果？

htmlcss
5
我希望你的网站上面的代码能够有下拉切换效果。默认情况下，当观众刷新页面时，第一个方框必须显示下拉框，当点击下一个方框时，前一个方框的下拉框应该隐藏。
如何实现这一点？ 

.maindrop {
    width: 49%;
}
.bar {
    padding: 20px;
    color: white;
    background: #1FB5AC;
    display: block;
    font-family: Times;
    text-decoration: none;
    font-size: 16px;
    transition: .2s ease-out;
    margin-bottom: .1cm;
}
.bar:hover {
    background: gray;
}
.dropbox {
    max-height: 0;
    transition: .5s ease-out;
    overflow: hidden;
    width: 100%;
}
.dropbox:target {
    max-height: 300px;
}
<div class="maindrop"  style="float: right">
        <div class="fold default">
            <a class="bar" href="#tab5">Speaker 5</a>
            <div class="dropbox" id='tab5'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
            </div>
        </div>
        <div class="fold">
            <a class="bar" href="#tab6"> Speaker 6</a>
            <div class="dropbox" id='tab6'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
            </div>
        </div>
        <div class="fold">
            <a class="bar" href="#tab7"> Speaker 7</a>
            <div class="dropbox" id='tab7'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
            </div>
        </div>
        <div class="fold">
            <a class="bar" href="#tab8"> Speaker 8</a>
            <div class="dropbox" id='tab8'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
            </div>
        </div>
    </div>

你想要在没有 JavaScript 的情况下切换它吗？ - Jishnu V S
@ManishPatel 抱歉..我已经更新了代码。 - user7229746
2
如果它们是兄弟元素，你可以这样做（即 a.bar:active + a.bar { display:none; }），但是你无法通过 CSS 调用父母或祖先。 - Daerik
你是指Bootstrap手风琴吗？http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible_accordion&stacked=h - Shivkumar kondi
我已经尝试了使用页面跳转的切换效果，但问题是speaker5框正在上移..然而，我希望下拉框中也能看到说话者的名字... - user7229746
显示剩余8条评论
2个回答
0

我正在使用PaulOB的帮助，根据需求和设计更新Shivkumar的答案。这段代码支持两列，运行良好。

编辑的优点如下：

  1. 双列模式
  2. 单击标题背景会产生切换效果
  3. 一次只能看到一个下拉框

function toggleChevron(e) {
      var theAccordion = $('#accordion');
   $(e.target)
        .prev('.panel-heading')
        .find('i.indicator')
        .toggleClass('glyphicon-minus glyphicon-plus');
        //$('#accordion .panel-heading').css('background-color', 'green');
    theAccordion.find('.panel-heading').removeClass('highlight');
    $(e.target).prev('.panel-heading').addClass('highlight');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
$('#accordion').on('show.bs.collapse', function () {
    $('#accordion .in').collapse('hide');
});
 .panel-heading .accordion-toggle:after {
 /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
 content: "\e113";    /* adjust as needed, taken from bootstrap.css */
 float: right;        /* adjust as needed */
 color: white;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
 /* symbol for "collapsed" panels */   content: "\e114";    /* adjust as needed, taken from bootstrap.css */
 color: white;
}
.accordion-toggle:hover {
 text-decoration: none;
}
.panel .panel-heading {
 font-weight: bold;
 font-size: 20px;
 font-family: verdana;
 border-radius:0;
 padding:0;
}
.panel .panel-heading a{
 display:block;
 background: #1FB5AF;
 color: white;
 padding:10px 15px;
 border-radius:3px;
 text-decoration:none;
}
.panel .panel-heading a:hover {
 background: grey;
 color: white;
 text-decoration:none;
}
#accordion .highlight a{
 background:#1FB5AC;/* change colour of selected bar here if needed */
 box-shadow:0 0 10px rgba(0,0,0,0.3);
 color:white;
 transition:background 2s ease;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->



<body>
<div class="clearfix panel-group" id="accordion">
  <div class="col-sm-6">
    <div class="panel panel-default">
      <div class="panel-heading highlight">
        <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <i class="indicator glyphicon glyphicon-minus"></i> Prof. Ravidra B Bapat, Indian Statistical Institute, Delhi, India </a> </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
          <div style="width: 100%; float: right; text-align: justify "> <img  style=" padding-right: 10px " src="http://sau.int/~ctgtc2016/images/RB_Bapat.jpeg" align="left" > The main areas of research interest of Prof. Bapat are nonnegative matrices,
            matrix inequalities, matrices in graph theory and generalized inverses.
            He has published more than 100 research papers in these areas in reputed
            national and international journals and guided three Ph.D. students. He
            has written books on Linear Algebra, published by Hindustan Book Agency,
            Springer and Cambridge University Press. He wrote a book on Mathematics
            for the general reader, in Marathi, which won the state government award
            for best literature in Science for 2004.
            Prof. Bapat has been on the editorial boards of Linear and Multilinear
            Algebra, Electronic Journal of Linear Algebra, India Journal of Pure and
            Applied Mathematics and Kerala Mathematical Association Bulletin. He
            has been elected Fellow of the Indian Academy of Sciences, Bangalore and
            Indian National Science Academy, Delhi. Prof. Bapat served as President of the Indian Mathematical Society during
            its centennial year 2007-2008. For the past several years he has been
            actively involved with the Mathematics Olympiad Program in India and
            served as the National Coordinator for the Program. Prof. Bapat served as
            Head, ISI Delhi Centre, during 2007-2011. He was awarded the J.C. Bose
            fellowship in 2009. </div>
          <div style="width: 70%; float: left; text-align: justify;"> </div>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <i class="indicator glyphicon glyphicon-plus"></i> Collapsible Group Item #2 </a> </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> <i class="indicator glyphicon glyphicon-plus"></i> Collapsible Group Item #3 </a> </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="panel panel-default">
      <div class="panel-heading highlight">
        <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne_2"> <i class="indicator glyphicon glyphicon-minus"></i> Collapsible Group Item #1 </a> </h4>
      </div>
      <div id="collapseOne_2" class="panel-collapse collapse">
        <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo_2"> <i class="indicator glyphicon glyphicon-plus"></i> Collapsible Group Item #2 </a> </h4>
      </div>
      <div id="collapseTwo_2" class="panel-collapse collapse">
        <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree_2"> <i class="indicator glyphicon glyphicon-plus"></i> Collapsible Group Item #3 </a> </h4>
      </div>
      <div id="collapseThree_2" class="panel-collapse collapse">
        <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
      </div>
    </div>
  </div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<!-- Latest compiled and minified JavaScript --> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">


</script>
</body>
</html>

-1

尝试使用Bootstrap-accordion...

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Accordion Example</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div> 
</div>
    
</body>
</html>

@Shivkumar 恰好是我想要的...如何获取样式代码...以便我可以编辑颜色和其他内容...就像在我的代码中一样...我喜欢我使用的那种颜色，并且还希望在框中有悬停效果。 - user7229746
我想像我的代码中那样为框式标题设置样式...在这里该怎么做呢？我认为如果我能得到样式选项的明确代码，那就太好了... - user7229746
@Meonly，你可以覆盖你的CSS，但在此之前请阅读以下内容：https://maxalley.wordpress.com/2015/02/20/bootstrap-style-the-accordion/，以及这个链接：https://www.sitepoint.com/community/t/bootstrap-3-accordian-onclick-accordion-background-should-be-change/98839/3 - Shivkumar kondi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接