2017-06-13 46 views
0

我在页面HTML上有很多按钮。所有这些按钮都会在您点击按钮时展开一些信息。只有一个按钮展开其他按钮

为了使它更有用,我想只用一个按钮,展开其他按钮。

首先,我尝试只显示一个按钮与主按钮,后我会为其他人做。

这就是我现在所做的,它显示不同但它不崩溃。

   <button class="btn btn-primary" type="button" id="collapseEveryButtons" data-target="collapseEveryButtons" data-toggle="collapse" aria-expanded="false" aria-controls="MonCollapse"><i class="glyphicon glyphicon-chevron-right"></i> Collapse</button> 

       <button class="btn btn-primary" type="button" id="collapseForm1" data-target="#collapseForm1" data-toggle="collapse" aria-expanded="false" aria-controls="MonCollapse"><i class="glyphicon glyphicon-chevron-right"></i> Form1</button> 
       <div id="collapseForm1" class="collapse"> 
        <div class="form-group"> 
         <label for="name1">Name :</label><br> 
         <input type="text" style="background-color:#bfbfbf;" disabled name="name1" class="form-control" id="name1" value="<?php echo $name1;?>"> 
        </div> 
        <div class="form-group"> 
         <label for="email">Email :</label><br> 
         <input type="text" style="background-color:#bfbfbf;" disabled name="email" class="form-control" id="email" value="<?php echo $email;?>"> 
        </div> 
       </div> 

        <script type="text/javascript"> 
        <!-- Change the color of the button when it's open--> 
         $('#collapseEveryButtons').click(function(){ 
          $('#Form1').find('i').toggleClass('glyphicon glyphicon-chevron-right').toggleClass('glyphicon glyphicon-chevron-down'); 
          $('.btn btn-open').not(this).removeClass('btn-open'); 
          $('#collapseAnneesRenovation').toggleClass('btn-open-collapsed'); 
          $("#collapseAnneesRenovation").attr("aria-expanded",true); 
          var $collapse = $('#collapseAnneesRenovation').find('.collapse'); 
          $collapse.collapse('toggle'); 
         }); 
        </script> 

这个节目如何打开一个按钮只

     $('#collapseForm1,#collapse2,#collapse3').click(function(){ 
          $(this).find('i').toggleClass('glyphicon glyphicon-chevron-right').toggleClass('glyphicon glyphicon-chevron-down'); 
          $('.btn btn-open').not(this).removeClass('btn-open'); 
          $(this).toggleClass('btn-open'); 
         }); 

感谢您的帮助。

+0

'Expand buttons' ....?怎么样?你想达到什么目的?您的问题尚不清楚...请创建一个可运行的代码片段来显示您的问题。 – Ionut

+0

你应该总是把变量名称,评论,类名......用英语。或者至少,把它们放在这里。很多非法国人会阅读你的代码,并不理解它 –

+0

好吧,我用英文更改它。我不太流利的英语,所以我尽我所能。很多按钮打开的东西形式,但你需要逐一打开。我只想用一个主按钮打开所有的按钮。希望你明白 –

回答

0

这没关系我解决它,但它仍然是一个问题

<div id="anneesRenovationCollapse" class="collapse"> 
         <div class="form-group"> 
          <label for="name">Name :</label><br> 
          <input type="text" style="background-color:#bfbfbf;" disabled name="name" class="form-control" id="immeuble_n_anne_toit" value="<?php echo $name;?>"> 
         </div> 
</div> 

<script type="text/javascript"> 
         $('#collapseEveryButtons').click(function(){ 
         $('#collapseAnneesRenovation').find('i').toggleClass('glyphicon glyphicon-chevron-right').toggleClass('glyphicon glyphicon-chevron-down'); 
         $('.btn btn-open').not(this).removeClass('btn-open'); 
         $('#collapseAnneesRenovation').toggleClass('btn-open-collapsed'); 
         $("#collapseAnneesRenovation").attr("aria-expanded",true); 
         $('#anneesRenovationCollapse').find('.collapse'); 
         $('#anneesRenovationCollapse').toggleClass('collapse collapse in'); 
}); 
</script> 

现在我打开所有的按钮与主一个“anneesRenovationCollapse”,但是当一个按钮,它已经打开,它就会关闭按钮,打开那些被关闭的。希望你明白。

相关问题