Question

我希望<div>展开并隐藏点击<div>标记的<a>。我正在使用bootstrap，我想要隐藏<div> col-md-4，但按钮位于col-md-8内。

点击<a>标记col-md-4应隐藏到左侧部分，col-md-8的宽度应增加。我该怎么做？

我的代码

.advanced_filter {width:100%; height:500px; background:red;}
.advanced_filter span {color:#fff; position:relative; top:50%; width:100%;}
.search_list {width:100%; height:500px; background:yellow;}

<div class="container">
	<div class="row">
    	<div class="col-md-4">
        	<div class="advanced_filter">
            <span>Advanced Filter Menu</span>
          </div>
      </div>
        
      <div class="col-md-8">
        	<a href="#">Hide / Show Advanced Filter</a>
        	<div class="search_list">
            
          </div>
      </div>
  </div>
</div>

Answer 1

您可以使用CSS

HTML

<a href="#someId">my div</a>
<div id="someId">some contents</div>

CSS

div {
    display: none;
}
:target {
    display: block;
}

Answer 2

您可以使用bootsrap Collapse。

在您的$("#btn1").click(function() { $('body').removeClass(); $('body').addClass('class1'); }); $("#btn2").click(function() { $('body').removeClass(); $('body').addClass('class2'); }); $("#btn3").click(function() { $('body').removeClass(); $('body').addClass('class3'); }); $('#grayButton').click(switchGray); $('#whiteButton').click(switchWhite); $('#blueButton').click(switchBlue); $('#yellowButton').click(switchYellow); function switchGray() { $('body').attr('class', 'gray'); } function switchWhite() { $('body').attr('class', 'white'); } function switchBlue() { $('body').attr('class', 'blue'); } function switchYellow() { $('body').attr('class', 'yellow'); }元素中使用data-toggle和data-target，并在<a>元素中使用collapse类。

<强>演示：

＆＃13;

advanced_filter

＆＃13;

.advanced_filter {width:100%; height:500px; background:red;}
.advanced_filter span {color:#fff; position:relative; top:50%; width:100%;}
.search_list {width:100%; height:500px; background:yellow;}

＆＃13;

修改

要使用<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.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div id="hideIt" class="col-md-4 collapse"> <div class="advanced_filter"> <span>Advanced Filter Menu</span> </div> </div> <div class="col-md-8"> <a data-toggle="collapse" data-target="#hideIt">Hide / Show Advanced Filter</a> <div class="search_list"> </div> </div> </div> </div>元素的父div切换col-md-12类，您需要使用 jQuery toggleClass()，如下所示：

<a>

<强>演示：

这是一个有效的demo Fiddle，展示了如何使用这个jQuery代码。

Answer 3

您可以使用jquery来完成。

请在此处找到解决方案：https://plnkr.co/edit/euf83rEokXvBdWbRvmOw?p=preview

$(document).ready(function(){

    $("#showHide").click(function(){
          $("#adv").css("display" , "none");
           $("#main").css("width" , "100%");
    }); 
});

/ *样式到这里* /

{{1}}

Jquery的：

{{1}}

点击href展开并隐藏div

3 个答案: