更改排列方式的小按鈕製作

選擇按鈕進行單行排列或多行排列

按鈕：

html：

      <div class="changeStyleBox">
        <div class="changeStyleBtn inline StyleBtnSelect">
          <span></span>
          <span style="margin-Top:6px"></span>
          <span style="margin-Top:6px"></span>
        </
 
div>
        <div class="changeStyleBtn table">
          <div>
            <span></span><span style="margin-Left:6px"></span>
          </div>
          <div style="margin-Top:6px">
            <span></span><span style="margin-Left:6px">
 
</span>
          </div>
        </div>
      </div>

css：

  .changeStyleBtn{position:relative;width: 30px;height: 30px;background-color: rgba(0,0,0,0.7);transition: 0.2s all ease-out}
  .StyleBtnSelect{background-color: rgba(255,255,255,0.4);}
  .changeStyleBtn:hover{cursor: pointer;background-color
 
: rgba(255,255,255,0.5);}
  .inline{padding: 6px 3px}
  .inline span{width: 24px;height: 2px; background-color: #fff;display: block;border-radius: 1px}
  .table{top:10px;padding: 6px;font-size: 0px}
  .table span{width: 6px; height: 6px;background-color: #fff;display: inline-block;border-radius: 1px}

jquery:對需要更改樣式的容器新增或移除對應的已經設定好的class 示例：

  $(".inline").on("click",function() {
    $(".product-pic").addClass("product-pic-style1").removeClass("product-pic-style2");
    $(".hiddenBox").addClass("hiddenBox-style1").removeClass("hiddenBox-style2").css("left","0");
    $(".pageBox").animate({opacity:1},200).css("display","block");
 	$(this).addClass("StyleBtnSelect").siblings(".changeStyleBtn").removeClass("StyleBtnSelect");
  });
  $(".table").on("click",function() {
    $(".product-pic").addClass("product-pic-style2").removeClass("product-pic-style1");
    $(".hiddenBox").addClass("hiddenBox-style2").removeClass("hiddenBox-style1").css("left","0");
    $(".pageBox").animate({opacity:0},200).css("display","none");
	$(this).addClass("StyleBtnSelect").siblings(".changeStyleBtn").removeClass("StyleBtnSelect");
  });

效果：