嵌套的引導程序崩潰onclick事件

我是新來引導和編碼，所以我目前正在嘗試打開我的主要引導面板與包含嵌套子面板的onclick-事件。嵌套的引導程序崩潰onclick事件

這是包含面板和按鈕我的index.html;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<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> 
 

 
<form onsubmit="return false" id="searchForm"> 
 
    <input type="button" value="Search" id="search" class="openPanel" /> 
 
</form> 
 
     
 
<br/><br/> 
 

 
<div class="container"> 
 
    <div class="panel-groupMain"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
      <a data-toggle="collapse" href="#collapse1">Main panel</a> 
 
     </h4> 
 
     </div> 
 
     <div id="collapse1" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
      <!-- Sub panels --> 
 
      <div class="panel-group" id="accordion"> 
 
       <!-- Sub panel 1 --> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-heading"> 
 
         <h4 class="panel-title"> 
 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a> 
 
         <span class="indicator glyphicon glyphicon-chevron-down pull-right"></span> 
 
        </h4> 
 
        </div> 
 
        <div id="collapse2" class="panel-collapse collapse"> 
 
         <div class="panel-body"> 
 
          <p id="contentOne"></p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <!-- Sub panel 2 --> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-heading"> 
 
         <h4 class="panel-title"> 
 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a> 
 
         <span class="indicator glyphicon glyphicon-chevron-down pull-right"></span> 
 
        </h4> 
 
        </div> 
 
        <div id="collapse3" class="panel-collapse collapse"> 
 
         <div class="panel-body"> 
 
          <div class="day" data-name="Tuesday"></div> 
 
          <p id="contentTwo"></p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <!-- Sub panel 3 --> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-heading"> 
 
         <h4 class="panel-title"> 
 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 3</a> 
 
         <span class="indicator glyphicon glyphicon-chevron-down pull-right"></span> 
 
        </h4> 
 
        </div> 
 
        <div id="collapse6" class="panel-collapse collapse"> 
 
         <div class="panel-body"> 
 
          <p id="contentFive"></p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

我試過這個代碼用於打開主要 - 面板，但我不能得到這個工作;

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#search").on("click", function() { 
      $(this).closest('.panel-heading').find('.collapse').collapse('show'); 
     }); 
    });     
</script>

，以便爲我的問題，有沒有什麼簡單有效的方法來僅打開主要 - 面板與按鍵點擊它打開後的按鈕將不會影響面板了嗎？

謝謝。

來源

2017-08-24 TechCount

你爲什麼不禁止點擊主潘內爾DIV –

這可能會幫助您解決問題https://stackoverflow.com/questions/15370544/using-if-else-with-onclick – mcadamm4

你想後，點擊禁用點擊在主潘內爾 –

在這裏，你去了一個解決方案https://jsfiddle.net/hbfvta27/

$(document).ready(function() { 
 
    $("#search").on("click", function() { 
 
    if(!$('.collapse').first().hasClass('in')) 
 
     $('a[data-toggle="collapse"]').first().click(); 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<form onsubmit="return false" id="searchForm"> 
 
    <input type="button" value="Search" id="search" class="openPanel" /> 
 
</form> 
 
     
 
<br/><br/> 
 

 
<div class="container"> 
 
    <div class="panel-groupMain"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
      <a data-toggle="collapse" href="#collapse1">Main panel</a> 
 
     </h4> 
 
     </div> 
 
     <div id="collapse1" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
      <!-- Sub panels --> 
 
      <div class="panel-group" id="accordion"> 
 
       <!-- Sub panel 1 --> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-heading"> 
 
         <h4 class="panel-title"> 
 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a> 
 
         <span class="indicator glyphicon glyphicon-chevron-down pull-right"></span> 
 
        </h4> 
 
        </div> 
 
        <div id="collapse2" class="panel-collapse collapse"> 
 
         <div class="panel-body"> 
 
          <p id="contentOne"></p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <!-- Sub panel 2 --> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-heading"> 
 
         <h4 class="panel-title"> 
 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a> 
 
         <span class="indicator glyphicon glyphicon-chevron-down pull-right"></span> 
 
        </h4> 
 
        </div> 
 
        <div id="collapse3" class="panel-collapse collapse"> 
 
         <div class="panel-body"> 
 
          <div class="day" data-name="Tuesday"></div> 
 
          <p id="contentTwo"></p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <!-- Sub panel 3 --> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-heading"> 
 
         <h4 class="panel-title"> 
 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 3</a> 
 
         <span class="indicator glyphicon glyphicon-chevron-down pull-right"></span> 
 
        </h4> 
 
        </div> 
 
        <div id="collapse6" class="panel-collapse collapse"> 
 
         <div class="panel-body"> 
 
          <p id="contentFive"></p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

希望這會幫助你。

來源

2017-08-24 14:44:00 Shiladitya

謝謝你打開它。當主面板打開**時，按*搜索*按鈕將關閉面板。有沒有解決方法，所以一旦面板打開*搜索*按鈕什麼也不做？ – TechCount

@TechCount。我已經更新了答案，看看。 – Shiladitya

如果我使用''在我的項目，這將不再工作。任何方式與它一起工作？ – TechCount

只需添加一個「中」命名的類上的引導面板希望的點擊它會幫助你

$(document).ready(function() { 
     $(".panel-groupMain").on("click", function() { 
      $(this).find('#collapse1').toggleClass('in'); 
     }); 
    });

來源

2017-08-24 14:41:19

嵌套的引導程序崩潰onclick事件

回答

相關問題