[英]Bootstrap Collapse hide onClick
freedomcore.com/saverplaces.co.uk/NEW/
在上面的站點中,單擊“獲取憑證”按鈕正下方的“ 條款和條件”或“此憑證的更多信息 ”鏈接。 您將在下面看到帶有內容的div幻燈片。
我希望這樣做,如果您單擊了“ 條款和條件”,然后單擊“關於此憑證的更多信息” ,它將隱藏“條款和條件”內容,因此不會同時顯示兩者。
我的JavaScript並不是最好的,但這不是我想要的:
我有關於此憑證鏈接的更多信息 ,此類class hide-terms-1,然后有此jQuery代碼:
$(document).ready(function(){
$(".hide-terms-1").click(function(){
$("#voucher-terms-1").hide();
});
});
這似乎是可行的,但是一旦單擊它便無法再次將其備份。
HTML:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar menubutton" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="menu">Menu</span>
</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-search"><img src="images/search_03.png">Search</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#">About Us</a></li>
<li><a href="#">Research & Innovation</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Responsibility</a></li>
<li class="subnav"><a href="#" >Careers</a></li>
<li class="subnav"><a href="#" >Newsroom</a></li>
<li class="subnav"><a href="#" >Contact Us</a></li>
<li class="navfoot">This is a mobile version of our website<br/>
<a href="#">View full site</a></li>
</ul>
</div><!--/.nav-collapse -->
<div class="nav-search collapse">
<div class="search_box">
<form action="" method="post">
<input type="text" value="Enter Search"><a href="#">Search</a>
</form>
</div><!-- end search_box -->
</div><!--/.nav-search -->
</div>
</div>
</div>
JS:
$('.container a').click(function(){
var $target = $($(this).data('target'));
if(!$target.hasClass('in'))
$('.container .in').removeClass('in').height(0);
});
讓我們以這種方式嘗試:
$(document).ready(function(){
$(".hide-terms-1").click(function(){
$("#voucher-terms-1").collapse('hide');
});
});
我認為這更好
$(".navbar").find("[data-toggle=collapse]").click(function(e){
e.preventDefault();e.stopPropagation();
$(".navbar").find(".collapse.in").collapse("hide");
$($(this).attr("data-target")).collapse("show");
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.