在單獨的圖像上單擊時打開手風琴

Question

我的頁面上需要以下功能。

有一組圖像從左到右滑動。每個圖像對應於下面的根據。 （請注意，圖片不是手風琴的一部分，手風琴有自己的標題和內容，圖片上方是獨立的）。最初，沒有顯示手風琴，當你點擊一個圖像時，相應的手風琴將被顯示出來，其他所有的手風琴將被隱藏）。我在我的頁面上使用了引導式手風琴，它自己可以正常工作，但我不確定如何將該部分鏈接到圖像滑塊。

另外，除了在這裏使用手風琴有沒有其他的選擇嗎？請注意，這也應該支持觸摸滑動。

問候， Chathu

Answer 1

您可以通過這種方式，您可以遠程更改你的手風琴，當用戶點擊圖像觸發頁面

$("#accordianID").collapse('toggle'); 

OR

$("#accordianID").collapse('show') 

上的事件手風琴狀態

參考文獻：Bootstrap DOC

Answer 2

這就是我所做的，這裏是作爲觸發器顯示手風琴的單槓。 （我和替換）

<ul id="zoneSlider"> 
     <li class="legacy_slider" style="width: 300px; height: 131px; float: left; display: block; background: #c11e07;"> 
      <div onclick="OperateAccordion(1)"; class="flex-caption_slider" style="background: #c11e07; height: 131px;">End the wait</div> 
     </li> 

     <li class="legacy_slider" style="width: 300px; height: 131px; float: left; display: block; background: #ff9400;"> 
      <div onclick="OperateAccordion(2)"; class="flex-caption_slider" style="background: #ff9400; height: 131px;">Intelligence @ the sales floor</div> 
     </li> 

     <li class="legacy_slider" style="width: 300px; height: 131px; float: left; display: block; background: #0ea913;"> 
      <div onclick="OperateAccordion(3)"; class="flex-caption_slider" style="background: #0ea913; height: 131px;">Helping store associates do more with less</div> 
     </li> 

     <li class="legacy_slider" style="width: 300px; height: 131px; float: left; display: block; background: #00a9ec;"> 
      <div onclick="OperateAccordion(4)"; class="flex-caption_slider" style="background: #00a9ec; height: 131px;">Let's help save water</div> 
     </li> 
    </ul> 

然後我用單獨的手風琴：

 <div class="accordion" id="accordion1"> 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">END THE WAIT 
       </a> 
      </div> 
      <div id="collapseOne" class="accordion-body collapse" style="height: 0px;"> 
       <div class="accordion-inner"> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="accordion" id="accordion2"> 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordio2" href="#collapseTwo">END THE WAIT 
       </a> 
      </div> 
      <div id="collapseTwo" class="accordion-body collapse" style="height: 0px;"> 
       <div class="accordion-inner"> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="accordion" id="accordion3"> 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
       <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordio3" href="#collapseThree">END THE WAIT 
       </a> 
      </div> 
      <div id="collapseThree" class="accordion-body collapse" style="height: 0px;"> 
       <div class="accordion-inner"> 
       </div> 
      </div> 
     </div> 
    </div> 

下面是我用來控制顯示器的JS：

 <script language="javascript"> 
     $(document).ready(function() { 
      $('#accordion2').hide(); 
      $('#accordion3').hide(); 
      $('#accordion4').hide(); 
      $('#accordion5').hide(); 
     }); 

     function OperateAccordion(index) { 
      if (index == 1) { 
       $('#accordion3').hide(); 
       $('#accordion4').hide(); 
       $('#accordion5').hide(); 
       $('#accordion2').show(); 
      } 
      else if (index == 2) { 
       $('#accordion2').hide(); 
       $('#accordion4').hide(); 
       $('#accordion5').hide(); 
       $('#accordion3').show(); 
      } 
      else if (index == 3) { 
       $('#accordion2').hide(); 
       $('#accordion3').hide(); 
       $('#accordion5').hide(); 
       $('#accordion4').show(); 
       //$("#accordion3").collapse(); 
      } 
      else if (index == 4) { 
       $('#accordion2').hide(); 
       $('#accordion3').hide(); 
       $('#accordion4').hide(); 
       $('#accordion5').show(); 
      } 
     } 
    </script> 

現在這個做什麼，我想要，除了一件事。顯示手風琴時應該用日本語表示。現在它顯示時會摺疊。如何實現這一目標？

此外，我不確定我是否以最好的方式做到這一點，所以，如果你能提出更好的選擇，那麼很感激。

Answer 3

好吧，我部分地解決了我的問題如下：

$('#accordion2').show(); 
    $('#collapseOne').collapse('show'); 

但是，這裏有一個小問題。在眨眼之間，它膨脹，崩潰，然後再次膨脹。我確定這是因爲這個show（）的事情，但無法找到解決方法。