如何實現顯示隱藏JavaScript沒有按鈕

Question

我有疑問要顯示和隱藏我正在使用引導，但我不明白如何使用顯示和隱藏，我所嘗試的是，當名稱被選中時只顯示該面板而其他面板保持隱藏狀態，當您關閉面板時，隱藏的其他面板會再次顯示，而當您選擇另一個面板而不是第一個隱藏其他面板時，只顯示打開的面板

此處的代碼：

<div class="container"> 
<h2>Our Attorneys</h2> 
<div class="panel-group"> 
    <div class="panel panel-default" id="drop1"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" href="#collapse1">Ricardo Aguirre M.</a> 
      </h4> 
     </div> 
     <div id="collapse1" class="panel-collapse collapse"> 
      <ul class="list-group"> 
       <li class="list-group-item" style="color: black;"> 
        <p> 
         text 
        </p> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div class="panel panel-default" id="drop2"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" href="#collapse2">Abel Chávez S.</a> 
      </h4> 
     </div> 
     <div id="collapse2" class="panel-collapse collapse"> 
      <ul class="list-group"> 
       <li class="list-group-item" style="color: black;"> 
        <p> 
         text 
        </p> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div class="panel panel-default" id="drop3"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" href="#collapse3">Angelly Wendy González F.</a> 
      </h4> 
     </div> 
     <div id="collapse3" class="panel-collapse collapse" style="color: black;"> 
      <ul class="list-group"> 
       <li class="list-group-item"> 
        <p> 
        text 
        </p> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div class="panel panel-default" id="drop4"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" href="#collapse4">Erick Garcia C.</a> 
      </h4> 
     </div> 
     <div id="collapse4" class="panel-collapse collapse" style="color: black;"> 
      <ul class="list-group"> 
       <li class="list-group-item"> 
        <p> 
         text 
        </p> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div class="panel panel-default" id="drop5"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" href="#collapse5">María Guadalupe Vargas A.</a> 
      </h4> 
     </div> 
     <div id="collapse5" class="panel-collapse collapse" style="color: black;"> 
      <ul class="list-group"> 
       <li class="list-group-item"> 
        <p> 
         <p> 
          text 
         </p> 
        </p> 
       </li> 
      </ul> 
      <%--<div class="panel-footer">Footer</div>--%> 
     </div> 
    </div> 
</div> 

和麪積：

<script> 
$(document).ready(function(){ 
    $("#drop1").click(function() { 
     $("drop2").hide(); 
     $("drop3").hide(); 
     $("drop4").hide(); 
     $("drop5").hide(); 
    }, 
    function() { 
     $("drop2").show(); 
     $("drop3").show(); 
     $("drop4").show(); 
     $("drop5").show(); 
    }); 

    $("#drop2").click(function() { 
     $("drop3").hide(); 
     $("drop4").hide(); 
     $("drop5").hide(); 
     $("drop1").hide(); 
    }, 
    function() { 
     $("drop3").show(); 
     $("drop4").show(); 
     $("drop5").show(); 
     $("drop1").show(); 
    }); 
    $("#drop3").click(function() { 
     $("drop1").hide(); 
     $("drop2").hide(); 
     $("drop4").hide(); 
     $("drop5").hide(); 
    }, 
    function() { 
     $("drop1").show(); 
     $("drop2").show(); 
     $("drop4").show(); 
     $("drop5").show(); 
    }); 
    $("#drop4").click(function() { 
     $("drop2").hide(); 
     $("drop3").hide(); 
     $("drop1").hide(); 
     $("drop5").hide(); 
    }, 
    function() { 
     $("drop2").show(); 
     $("drop3").show(); 
     $("drop1").show(); 
     $("drop5").show(); 
    }); 
    $("#drop5").click(function() { 
     $("drop2").hide(); 
     $("drop3").hide(); 
     $("drop4").hide(); 
     $("drop1").hide(); 
    }, 
    function() { 
     $("drop2").show(); 
     $("drop3").show(); 
     $("drop4").show(); 
     $("drop1").show(); 
    }); 
}); 
</script> 

我很困惑。

Answer 1

如果我理解你正確時，你點擊一個名字/面板要切換顯示其他面板/名稱的可見性，然後基於單擊來顯示/隱藏。

如果是則僅僅用這個使用類的願望：

$(document).ready(function() { 
    $('.panel-group').on('click', '.panel', function() { 
    $(this).siblings().toggle(); 
    }); 
}); 

Answer 2

只是加載引導和jQuery，也沒有必要隱瞞或使用JavaScript

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Accordion Example</h2> 
 
    <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> 
 
    <div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> 
 
     </h4> 
 
     </div> 
 
     <div id="collapse1" class="panel-collapse collapse in"> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> 
 
     </h4> 
 
     </div> 
 
     <div id="collapse2" class="panel-collapse collapse"> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> 
 
     </h4> 
 
     </div> 
 
     <div id="collapse3" class="panel-collapse collapse"> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing 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> 
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
</body> 
 
</html>