javascript - 将 DRY 放大 ibox-content 函数转换为动态函数

Question

我创建了一堆 DRY 函数，这些函数会将 Bootstrap ibox 内容从最初的任何列大小增加到最大列大小 (12)。因此，我需要帮助创建一个动态函数，该函数适用于所有具有放大功能的按钮，方法是在单击时将 ibox-content 增加到最大列大小，然后在再次单击时恢复到其原始列大小。

<强> JsFiddle

HTML

<div class="row">
    <div class="col-lg-6" id="elements">
        <div class="ibox float-e-margins" id="elementBox">           
            <div class="ibox-title" tabindex="0">
                <button type="button" class="btn btn-xs btn-go-1">
                    <i class="glyphicon glyphicon-fullscreen"></i>
                </button> 
            </div>
            <div class="ibox-content short-box" id="ibox-1">
                content
            </div>
        </div>
    </div>
</div>

JAVASCRIPT

 $(".btn-go-1").click(function () {
     $("#elements").toggleClass("col-lg-6 col-lg-12", 1000, "linear");
     $("#ibox-1").toggleClass("short-box large-box", 1000, "linear");
 });

Answer 1

1. 为您的容器提供相同的类，例如container。
2. 为您的按钮提供相同的类，例如 btn-go。

3. 添加data-* 属性保存每个容器的默认大小，例如:

   <div data-default='col-xs-6' class="container col-xs-6" id="strageties">
   

4. 为 btn-go 创建一键事件:

   $(".btn-go").click(function () {
       var container = $(this).parents('.container');
       var default_size = container.data('default');
   
       //Toggle between default size and max size
       container.toggleClass(default_size+" col-xs-12",1000,"linear");
       container.find(".ibox-content").toggleClass("short-box large-box", 1000, "linear");
   });
   

希望这有帮助。

$(".btn-go").click(function () {
  var container = $(this).parents('.container');
  var default_size = container.data('default');
  
  container.toggleClass(default_size+" col-xs-12", 1000, "linear");
  container.find(".ibox-content").toggleClass("short-box large-box", 1000, "linear");
});

.container{
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div data-default='col-xs-6' class="container col-xs-6" id="elements">
    <div class="ibox float-e-margins">           
      <div class="ibox-title" tabindex="0">
        <button type="button" class="btn btn-xs btn-go">
          <i class="glyphicon glyphicon-fullscreen"></i>
        </button> 
      </div>
      <div class="ibox-content short-box" id="ibox-1">
        content
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div data-default='col-xs-6' class="container col-xs-6" id="strageties">
    <div class="ibox float-e-margins">           
      <div class="ibox-title" tabindex="0">
        <button type="button" class="btn btn-xs btn-go">
          <i class="glyphicon glyphicon-fullscreen"></i>
        </button> 
      </div>
      <div class="ibox-content short-box" id="ibox-2">
        content
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div data-default='col-xs-8' class="container col-xs-8" id="map">
    <div class="ibox float-e-margins">           
      <div class="ibox-title" tabindex="0">
        <button type="button" class="btn btn-xs btn-go">
          <i class="glyphicon glyphicon-fullscreen"></i>
        </button> 
      </div>
      <div class="ibox-content short-box" id="ibox-3">
        content
      </div>
    </div>
  </div>
</div>