單擊兩次時阻止div隱藏？

Question

代碼隱藏並顯示了我想要的 div。 但是當我兩次單擊相同的鏈接時，它會隱藏它，所以它不會在屏幕上顯示任何內容。 我想知道當它已經主動顯示 div 時如何禁用鏈接。 （當單擊另一個鏈接以打開另一個 div 時，它會將禁用更改為活動鏈接，當前顯示因此該人不會單擊它兩次並且 div 的主體信息不會隱藏）。

 function slideonlyone(thechosenone) { $('.newboxes').each(function (index) { $(this).slideUp(600); if ($(this).attr("id") == thechosenone &&.$(this):is('.visible')) { $(this);slideDown(200); } }); }

 .question { margin-top: 15px; margin-bottom:5px; padding: 5px; text-transform: uppercase; /* Заглавные буквы */ }.bg_div_activ { color:#fff; font-family:RobotoRegular; font-size:16px; background-color:#0a121f; padding: 15px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 " style="margin-top:40px; text-align:left; "> <div class="question"> <a id="myHeader1" href="javascript:slideonlyone('newboxes1');">First question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes1" style="display: block;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div class="question"> <a id="myHeader2" href="javascript:slideonlyone('newboxes2');">Second question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes2" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div class="question"> <a id="myHeader3" href="javascript:slideonlyone('newboxes3');">Third question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes3" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div class="question"> <a id="myHeader4" href="javascript:slideonlyone('newboxes4');">Fourth question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes4" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div class="question"> <a id="myHeader5" href="javascript:slideonlyone('newboxes5');">Fifth question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes5" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>

Answer 1

嘗試使您的 HTML 代碼盡可能簡單，同時嘗試找出問題。 並且僅在有效時才填充內容）

簡化演示：

 $('.question').on('click', function(){ var $next = $(this).next('.newboxes'); if( $next.hasClass('active') ){ return; } $('.active').slideUp(200).removeClass('active'); $next.slideDown(600).addClass('active'); }); // $(this) == the clicked element;

 .question { margin-top: 15px; margin-bottom: 5px; padding: 5px; text-transform: uppercase; cursor: pointer; }.bg_div_activ { display: none; color: #fff; font-family: RobotoRegular; font-size: 16px; background-color: #0a121f; padding: 15px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="question">1 - que</div> <div class="newboxes bg_div_activ active" style="display: block;">1111</div> <div class="question">2 - que</div> <div class="newboxes bg_div_activ">2222</div> <div class="question">3 - que</div> <div class="newboxes bg_div_activ">3333</div> <div class="question">4 - que</div> <div class="newboxes bg_div_activ">4444</div>

Ps 你真的不需要 id 和錨來讓你的代碼工作*

Answer 2

您可以嘗試以下方法：

 function slideonlyone(thechosenone) { $(thechosenone).parent().prevAll('.newboxes').slideUp(600); $(thechosenone).parent().nextAll('.newboxes').slideUp(600); if($(thechosenone).parent().next('.newboxes').is(':visible')){ $(thechosenone).parent().next('.newboxes').slideUp(600); } else{ $(thechosenone).parent().next('.newboxes').slideDown(600); } }

 .question { margin-top: 15px; margin-bottom:5px; padding: 5px; text-transform: uppercase; /* Заглавные буквы */ }.bg_div_activ { color:#fff; font-family:RobotoRegular; font-size:16px; background-color:#0a121f; padding: 15px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 " style="margin-top:40px; text-align:left; "> <div class="question"> <a id="myHeader1" href="#" onclick="slideonlyone(this);">First question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes1" style="display: block;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div class="question"> <a id="myHeader2" href="#" onclick="slideonlyone(this);">Second question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes2" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div class="question"> <a id="myHeader3" href="#" onclick="slideonlyone(this);">Third question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes3" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div class="question"> <a id="myHeader4" href="#" onclick="slideonlyone(this);">Fourth question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes4" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div class="question"> <a id="myHeader5" href="#" onclick="slideonlyone(this);">Fifth question?</a> </div> <div class="newboxes bg_div_activ" id="newboxes5" style="display: none;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> </div>