1. 首頁
  2. 問答
  3. 打開/關閉使用不同按鈕的自舉手風琴

打開/關閉使用不同按鈕的自舉手風琴

2016-09-23 125 views
1

我希望有人能夠提供幫助。我有一個的jsfiddle設在這裏 - https://jsfiddle.net/henry_ivory/Lr3n5pjw/打開/關閉使用不同按鈕的自舉手風琴

下面是小提琴作爲一個片段：

$(document).on('click', '.collapse-link-1', function(e) { 
 
    //alert("open accordions-->"); 
 
    $('.collapseOne').collapse('toggle'); 
 
}); 
 

 
$(document).on('click', '.collapse-link-2', function(e) { 
 
    //alert("open accordions-->"); 
 
    $('.collapseTwo').collapse('toggle'); 
 
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<div class="product-title" style="width:100%;text-align:center;color:black;"> 
 
    <h3>Email</h3> 
 
</div> 
 
<div class="col-sm-6"> 
 
    <div class="panel-group" id="LHS"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <a id="L1" class="collapsed collapse-link-1" data-toggle="collapse" data-parent="#" href="#collapseOne_L">LHS1</a> 
 
       </h4> 
 
      </div> 
 
      <!--/.panel-heading --> 
 
      <div id="collapseOne_L" class="panel-collapse collapseOne collapse"> 
 
       <div class="panel-body"> 
 
        Welcome LHS1 
 
       </div> 
 
       <!--/.panel-body --> 
 
      </div> 
 
      <!--/.panel-collapse --> 
 
     </div> 
 
     <!-- /.panel --> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <a id="L2" class="collapsed collapse-link-2" data-toggle="collapse" data-parent="#" href="#collapseTwo_L"> 
 
         LHS2 
 
        </a> 
 
       </h4> 
 
      </div> 
 
      <!--/.panel-heading --> 
 
      <div id="collapseTwo_L" class="panel-collapse collapseTwo collapse"> 
 
       <div class="panel-body"> 
 
        Welcome LHS2 
 
       </div> 
 
       <!--/.panel-body --> 
 
      </div> 
 
      <!--/.panel-collapse --> 
 
     </div> 
 
     <!-- /.panel --> 
 
    </div> 
 
</div> 
 
<div class="col-sm-6"> 
 
    <div class="panel-group" id="RHS"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <a id="L1" class="collapsed collapse-link-1" data-toggle="collapse" data-parent="#" href="#collapseOne_R"> 
 
         RHS1 
 
        </a> 
 
       </h4> 
 
      </div> 
 
      <!--/.panel-heading --> 
 
      <div id="collapseOne_R" class="panel-collapse collapseOne collapse"> 
 
       <div class="panel-body"> 
 
        Welcome RHS1 
 
       </div> 
 
       <!--/.panel-body --> 
 
      </div> 
 
      <!--/.panel-collapse --> 
 
     </div> 
 
     <!-- /.panel --> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <a id="L2" class="collapsed collapse-link-2" data-toggle="collapse" data-parent="#" href="#collapseTwo_R"> 
 
         RHS2 
 
        </a> 
 
       </h4> 
 
      </div> 
 
      <!--/.panel-heading --> 
 
      <div id="collapseTwo_R" class="panel-collapse collapseTwo collapse"> 
 
       <div class="panel-body"> 
 
        Welcome RHS2 
 
       </div> 
 
       <!--/.panel-body --> 
 
      </div> 
 
      <!--/.panel-collapse --> 
 
     </div> 
 
     <!-- /.panel --> 
 
    </div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

這就是我想要實現：

structure

如果用戶點擊標題（電子郵件等）或產品名稱或標誌，然後全部該部分（電子郵件等）中的面板將需要立即打開，並崩潰。同時按下欄上的+會導致4個面板展開和摺疊。

面板的數量可能在每個部分增加，因此需要進行擴展。我覺得我很接近，但我的JavaScript技能是有限的！

來源

2016-09-23 Henry

+0

小提琴是好的，但堆棧片段（'<>'工具欄按鈕）使您的代碼可以在現場**運行**甚至更好。當你使用外部網站時，你可能會冒險將重要信息排除在問題之外（問題不能依賴於網站外的內容）。使用堆棧片段顯着提高了獲得有用答案的機會。 （如同格式化你的代碼，所以它不是大規模縮進，並且不在頁面的右側。） –

+0

我已經將小提琴複製到了你的問題中，並完成了格式化。 （奇怪的是，片段編輯器中的「Tidy」按鈕確實不喜歡這些鏈接;可能值得檢查，您沒有未封閉標籤或兩個地方。） –

+0

感謝您的幫助@ T.J.Crowder！ – Henry

回答

0

希望這會對你有用。

<script> 
$(function() 
{ 
var boolean="true"; 
var timesRun = 0; 
var interval = setInterval(function(){ 
    timesRun += 1; 
$(".panel-collapse,.panel-title a").attr("aria-expanded","true"); 
$(".panel-collapse").addClass("in"); 
$(".panel-title a").addClass("collapsed"); 
console.log(timesRun); 
    if(timesRun === 2){ 
$(".panel-collapse,.panel-title a").attr("aria-expanded","false"); 
$(".panel-collapse").removeClass("in"); 
$(".panel-title a").removeClass("collapsed"); 
     clearInterval(interval); 
    } 
}, 1000); 
$(".product-title h3").click(function() 
{ 
if(boolean) 
{ 
$(".panel-collapse,.panel-title a").attr("aria-expanded","true"); 
$(".panel-collapse").addClass("in"); 
$(".panel-title a").addClass("collapsed"); 
boolean=false; 
} 
else 
{ 
$(".panel-collapse,.panel-title a").attr("aria-expanded","false"); 
$(".panel-collapse").removeClass("in"); 
$(".panel-title a").removeClass("collapsed"); 
boolean=true; 
} 
}); 
}); 
</script>

來源

2016-09-23 17:10:46 Swanand

+0

感謝這個腳本非常接近，我只注意到它有一個錯誤，也許你可以幫忙嗎？如果你打開然後關閉其中一個面板標題（比如product1），然後試着用section標題（email）打開，面板描述文本就會出現，但面板本身不會生成動畫 - 任何想法都是爲什麼？ – Henry

+0

不知道爲什麼class'.panel-collapse collapse'總是有'height：0'的樣式屬性。我發佈了另一個答案。檢查它是否正常工作？ – Swanand

+0

是的，它現在正在工作，謝謝！我現在只需要有幾個這樣的部分，是否可以擴展這些代碼？所以每個部分獨立工作？ – Henry

0

試一試這個。

<script> 
$(function() 
{ 
function panel_show() 
{ 
$(".panel-collapse,.panel-title a").attr("aria-expanded","true"); 
$(".panel-collapse").addClass("in"); 
$(".panel-collapse").removeAttr("style") 
$(".panel-title a").addClass("collapsed"); 
} 
function panel_hide() 
{ 
$(".panel-collapse,.panel-title a").attr("aria-expanded","false"); 
$(".panel-collapse").removeClass("in"); 
$(".panel-collapse").removeAttr("style") 
$(".panel-title a").removeClass("collapsed"); 
} 
var bool="true"; 
var timesRun = 0; 
var interval = setInterval(function(){ 
    timesRun += 1; 
panel_show() 
console.log(timesRun); 
    if(timesRun === 2){ 
panel_hide(); 
     clearInterval(interval); 
    } 
}, 1000); 
$(".product-title h3").click(function() 
{ 
if(bool) 
{ 
panel_show(); 
bool=false; 
} 
else 
{ 
panel_hide(); 
bool=true; 
} 
}); 
}); 
</script>

來源

2016-09-26 11:20:15 Swanand

+0

感謝您的回覆，效果很好。任何想法，我可以擴大這個包括幾個獨立的部分獨立工作？ – Henry

+0

是的。請在「.panel-collapse」之前使用您的部分名稱或ID。 – Swanand

+0

這裏是一個更新的小提琴 - https://jsfiddle.net/henry_ivory/Lr3n5pjw/1/ – Henry

0

試試這一個，但請注意，您必須通過使用兩個div

<script> 
$(function() 
{ 
function panel_show(curr_sec) 
{ 
$("#" +curr_sec +" .panel-collapse").attr("aria-expanded","true"); 
$("#" +curr_sec +" .panel-title a").attr("aria-expanded","true"); 
$("#" +curr_sec +" .panel-collapse").addClass("in"); 
$("#" +curr_sec +" .panel-collapse").removeAttr("style") 
$("#" +curr_sec +" .panel-title a").addClass("collapsed"); 
} 
function panel_hide(curr_sec) 
{ 
$("#" +curr_sec +" .panel-collapse").attr("aria-expanded","false"); 
$("#" +curr_sec +" .panel-title a").attr("aria-expanded","false"); 
$("#" +curr_sec +" .panel-collapse").removeClass("in"); 
$("#" +curr_sec +" .panel-collapse").removeAttr("style") 
$("#" +curr_sec +" .panel-title a").removeClass("collapsed"); 
} 
var bool="true"; 
var timesRun = 0; 
var interval = setInterval(function(){ 
    timesRun += 1; 
$(".panel-collapse,.panel-title a").attr("aria-expanded","true"); 
$(".panel-collapse").addClass("in"); 
$(".panel-collapse").removeAttr("style") 
$(".panel-title a").addClass("collapsed"); 
console.log(timesRun); 
    if(timesRun === 2){ 
$(".panel-collapse,.panel-title a").attr("aria-expanded","false"); 
$(".panel-collapse").removeClass("in"); 
$(".panel-collapse").removeAttr("style") 
$(".panel-title a").removeClass("collapsed"); 
     clearInterval(interval); 
    } 
}, 1000); 
$(".product-title h3").click(function() 
{ 
var bool="true"; 
var curr_sec=' '; 
var prev_sec=' '; 
$(this).closest('div').parent('div').attr("id","Current_Section"); 
curr_sec = $(this).closest('div').parent('div').attr("id").toString(); 
$(this).closest('div').parent('div').siblings().attr("id","Prev_Section"); 
prev_sec=$(this).closest('div').parent('div').siblings().attr("id").toString(); 
$(this).toggleClass("Selected"); 
$(this).closest('div').parent('div').siblings().find("h3").removeClass("Selected") 
if($(this).hasClass("Selected") === true) 
{ 
panel_show(curr_sec); 
panel_hide(prev_sec) 
} 
else 
{ 
panel_hide(prev_sec) 
panel_hide(curr_sec); 
} 
}); 
}); 
</script>

這裏來分隔的部分是你的HTML代碼：

<div id="section1"> 
<div class="product-title" style="width:100%;text-align:center;color:black;background-color:#3c4d5a;"> 
     <h3 style="padding:5px;color:white;margin-bottom: 0;">Email</h3> 

     </div> 
     <div class="col-sm-6" style="background-color:#23ff7c;">In my Data Centre</div> 
     <div class="col-sm-6" style="background-color:#2691fa;">As a service</div> 

     <div class="col-sm-6"> 
     <div class="panel-group" id="accordion"> 
     <!-- First Panel --> 
     <div class="panel panel-default"> 
     <div class="service-logo" style="float: left;"><img src="assets/scc.jpg" class="img-responsive" style="max-height:37px;margin-right: 10px;"></div> 
     <div class="panel-heading" style="border-radius: 0px;"> 

      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseOne"> 
      <div class="service-title">Product or Service Title</div> 
      </h4> 
      <input type="checkbox" style="float:right" onclick="event.stopPropagation()" /> 

     </div> 
     <div id="collapseOne" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      <ul> 
      <li>Highlight One</li> 
      <li>Highlight Two</li> 
      <li>Highlight Three</li> 
      </ul> 
      <div class="service-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div class="service-extras" style="">Datacentres located in: <b>France</b></div> 
      </div> 
     </div> 
     </div> 
     <!-- Second Panel --> 
     <div class="panel panel-default"> 
     <div class="service-logo" style="float: left;"><img src="assets/scc.jpg" class="img-responsive" style="max-height:37px;margin-right: 10px;"></div> 
     <div class="panel-heading" style="border-radius: 0px;"> 
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseTwo"> 
      <div class="service-title">Product or Service Title</div> 
      </h4> 
      <input type="checkbox" style="float:right" onclick="event.stopPropagation()" /> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      <ul> 
      <li>Highlight One</li> 
      <li>Highlight Two</li> 
      <li>Highlight Three</li> 
      </ul> 
      <div class="service-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div class="service-extras" style="">Datacentres located in: <b>France</b></div> 
      </div> 
     </div> 
     </div> 
     </div> 
     </div> 
     <div class="col-sm-6"> 
     <div class="panel-group" id="accordion"> 
     <!-- First Panel --> 
     <div class="panel panel-default"> 
     <div class="service-logo" style="float: left;"><img src="assets/scc.jpg" class="img-responsive" style="max-height:37px;margin-right: 10px;"></div> 
     <div class="panel-heading" style="border-radius: 0px;"> 
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseFour"> 
      <div class="service-title">Product or Service Title</div> 
      </h4> 
      <input type="checkbox" style="float:right" onclick="event.stopPropagation()" /> 
     </div> 
     <div id="collapseFour" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      <ul> 
      <li>Highlight One</li> 
      <li>Highlight Two</li> 
      <li>Highlight Three</li> 
      </ul> 
      <div class="service-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div class="service-extras" style="">Datacentres located in: <b>France</b></div> 
      </div> 
     </div> 
     </div> 
     <!-- Second Panel --> 
     <div class="panel panel-default"> 
     <div class="service-logo" style="float: left;"><img src="assets/scc.jpg" class="img-responsive" style="max-height:37px;margin-right: 10px;"></div> 
     <div class="panel-heading" style="border-radius: 0px;"> 
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseFive"> 
      <div class="service-title">Product or Service Title</div> 
      </h4> 
      <input type="checkbox" style="float:right" onclick="event.stopPropagation()" /> 
     </div> 
     <div id="collapseFive" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      <ul> 
      <li>Highlight One</li> 
      <li>Highlight Two</li> 
      <li>Highlight Three</li> 
      </ul> 
      <div class="service-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div class="service-extras" style="">Datacentres located in: <b>France</b></div> 
      </div> 
     </div> 
     </div> 
     </div> 
     </div> 
    </div> 
      <div id="section2"> 
      <div class="product-title" style="width:100%;text-align:center;color:black;background-color:#3c4d5a;"> 
     <h3 style="padding:5px;color:white;margin-bottom: 0;">another heading</h3> 

     </div> 
     <div class="col-sm-6" style="background-color:#23ff7c;">In my Data Centre</div> 
     <div class="col-sm-6" style="background-color:#2691fa;">As a service</div> 

     <div class="col-sm-6"> 
     <div class="panel-group" id="accordion"> 
     <!-- First Panel --> 
     <div class="panel panel-default"> 
     <div class="service-logo" style="float: left;"><img src="assets/scc.jpg" class="img-responsive" style="max-height:37px;margin-right: 10px;"></div> 
     <div class="panel-heading" style="border-radius: 0px;"> 

      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseOne"> 
      <div class="service-title">Product or Service Title</div> 
      </h4> 
      <input type="checkbox" style="float:right" onclick="event.stopPropagation()" /> 

     </div> 
     <div id="collapseOne" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      <ul> 
      <li>Highlight One</li> 
      <li>Highlight Two</li> 
      <li>Highlight Three</li> 
      </ul> 
      <div class="service-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div class="service-extras" style="">Datacentres located in: <b>France</b></div> 
      </div> 
     </div> 
     </div> 
     <!-- Second Panel --> 
     <div class="panel panel-default"> 
     <div class="service-logo" style="float: left;"><img src="assets/scc.jpg" class="img-responsive" style="max-height:37px;margin-right: 10px;"></div> 
     <div class="panel-heading" style="border-radius: 0px;"> 
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseTwo"> 
      <div class="service-title">Product or Service Title</div> 
      </h4> 
      <input type="checkbox" style="float:right" onclick="event.stopPropagation()" /> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      <ul> 
      <li>Highlight One</li> 
      <li>Highlight Two</li> 
      <li>Highlight Three</li> 
      </ul> 
      <div class="service-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div class="service-extras" style="">Datacentres located in: <b>France</b></div> 
      </div> 
     </div> 
     </div> 
     </div> 
     </div> 
     <div class="col-sm-6"> 
     <div class="panel-group" id="accordion"> 
     <!-- First Panel --> 
     <div class="panel panel-default"> 
     <div class="service-logo" style="float: left;"><img src="assets/scc.jpg" class="img-responsive" style="max-height:37px;margin-right: 10px;"></div> 
     <div class="panel-heading" style="border-radius: 0px;"> 
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseFour"> 
      <div class="service-title">Product or Service Title</div> 
      </h4> 
      <input type="checkbox" style="float:right" onclick="event.stopPropagation()" /> 
     </div> 
     <div id="collapseFour" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      <ul> 
      <li>Highlight One</li> 
      <li>Highlight Two</li> 
      <li>Highlight Three</li> 
      </ul> 
      <div class="service-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div class="service-extras" style="">Datacentres located in: <b>France</b></div> 
      </div> 
     </div> 
     </div> 
     <!-- Second Panel --> 
     <div class="panel panel-default"> 
     <div class="service-logo" style="float: left;"><img src="assets/scc.jpg" class="img-responsive" style="max-height:37px;margin-right: 10px;"></div> 
     <div class="panel-heading" style="border-radius: 0px;"> 
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseFive"> 
      <div class="service-title">Product or Service Title</div> 
      </h4> 
      <input type="checkbox" style="float:right" onclick="event.stopPropagation()" /> 
     </div> 
     <div id="collapseFive" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      <ul> 
      <li>Highlight One</li> 
      <li>Highlight Two</li> 
      <li>Highlight Three</li> 
      </ul> 
      <div class="service-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div class="service-extras" style="">Datacentres located in: <b>France</b></div> 
      </div> 
     </div> 
     </div> 
     </div> 
     </div> 
    </div>

來源

2016-09-26 15:44:37 Swanand

+0

只需參考上面的js和HTML代碼:) – Swanand

+0

非常感謝！我很感激你的時間，期待着這 – Henry

+0

隨時歡迎:) – Swanand

相關問題

 相關問題