twitter-bootstrap Bootstrap 折叠隐藏 onClick

Bootstrap Collapse hide onClick

提问by Chudz

freedomcore.com/saverplaces.co.uk/NEW/

Freedomcore.com/saverplaces.co.uk/NEW/

In the above site when click the Terms & Conditionsor More informationon this voucher links just below the Get Voucher button. You will see a div slide down below with the content.

在上述网站中，单击“获取优惠券”按钮下方的“条款和条件”或有关此优惠券的更多信息链接。您将在下方看到一个带有内容的 div 幻灯片。

I want it so that if you have clicked Terms & Conditionsthen go and click More information on this voucherit will hide the "Terms & Conditions" content so that both are not displayed at the same time.

我希望这样，如果您单击了条款和条件，然后单击此凭证的更多信息，它将隐藏“条款和条件”内容，以便两者不会同时显示。

My JavaScript isn't the best this is what I came up with but it does not work:

我的 JavaScript 不是最好的，这是我想出的，但它不起作用：

I have More informationon this voucher link this class hide-terms-1then I have this jQuery code:

我有关于这个凭证链接这个类的更多信息hide-terms-1然后我有这个 jQuery 代码：

$(document).ready(function(){
  $(".hide-terms-1").click(function(){
    $("#voucher-terms-1").hide();
  });
});

This seems to be working kind of but once it is click you can not open it back up again.

这似乎是有效的，但一旦点击，您将无法再次打开它。

回答by Luca

Let's try in this way:

让我们试试这样：

$(document).ready(function(){
  $(".hide-terms-1").click(function(){
    $("#voucher-terms-1").collapse('hide');
  });
});

回答by webcoder

HTML:

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 &amp; 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:

JS：

$('.container a').click(function(){ 
    var $target = $($(this).data('target')); 
    if(!$target.hasClass('in'))
        $('.container .in').removeClass('in').height(0);
});

http://jsfiddle.net/gNUEx/

http://jsfiddle.net/gNUEx/

http://jsfiddle.net/mmfansler/fzbsp/

http://jsfiddle.net/mmfansler/fzbsp/

回答by ozgrozer

This is much better I think

我觉得这好多了

$(".navbar").find("[data-toggle=collapse]").click(function(e){

    e.preventDefault();e.stopPropagation();
    $(".navbar").find(".collapse.in").collapse("hide");
    $($(this).attr("data-target")).collapse("show");

});