单击锚标记时如何显示div

Question

我正在巴士预定网站上。 公交车运营商名单很多。 单击立即预订链接时，我只需要在该行的下方显示特定的公交信息。 在每个列表中，我都有“立即预订”按钮。 请检查我的HTML代码

 $(document).ready(function(){ $(".ltbrd").click(function(){ $(this).find(".bcont").slideToggle(200); }); }); 

 .busrowmain { overflow: hidden; } .busrow { padding: 5px 0px; width: 940px; float: left; text-align: center; } .busrow li { text-transform: uppercase; text-align: center; padding: 0 42px; float: left; font-size: 14px; color:#444; } .busrow li span { font-weight: bold; font-size: 16px; } .busrowbtn { padding-top: 15px; } .busrowbtn a { padding: 10px 35px; background: #da4f56; color:#fff; text-transform: uppercase; transition: all 0.3s; border-radius: 2px; } .busrowbtn a:hover { background: #f15a61; } .ltbrd { border-bottom: solid 1px #e8e8e8; padding-bottom: 13px; padding-top: 13px; transition: all 0.3s; } .ltbrd:hover { background: #f8f8f8; } .bcont { width: 100%; background: #f8f8f8; border-top: solid 2px #e8e8e8; min-height: 200px; padding: 30px; display: none; } 

 <div class="row ltbrd"> <div class="busrowmain"> <div class="busrow"> <li> BUS NO <br/> <span>TN045</span> </li> <li> BUS TYPE <br/> <span>2*3 AC</span> </li> <li> DEPARTURE TIME <br/> <span>10:00 PM</span> </li> <li> ARRIVAL TIME <br/> <span>2:00 AM</span> </li> <li> SEATS <br/> <span>62</span> </li> <li> FARE <br/> <span>750</span> </li> </div> <div class="busrowbtn"> <a href="#">BOOK NOW</a> </div> </div> <div class="bcont"> Bus Information content </div> </div> 

当我单击公共汽车清单行时，公共汽车信息部分正在打开。 但是我需要当我们单击“现在预订”链接，然后仅打开公交信息div。 请帮忙。

Answer 1

https://api.jquery.com/show/

您可以为此使用$ .show（）和$ .hide（）。

<a href="#" onclick="$('#div_id').show();">Book Now</a>

Answer 2

尝试这个：

 $(document).ready(function(){ $(".busrowbtn a").click(function(){ $(this).parents(".busrowmain").next(".bcont").slideToggle(200); }); }); 

 .busrowmain { overflow: hidden; } .busrow { padding: 5px 0px; width: 940px; float: left; text-align: center; } .busrow li { text-transform: uppercase; text-align: center; padding: 0 42px; float: left; font-size: 14px; color:#444; } .busrow li span { font-weight: bold; font-size: 16px; } .busrowbtn { padding-top: 15px; } .busrowbtn a { padding: 10px 35px; background: #da4f56; color:#fff; text-transform: uppercase; transition: all 0.3s; border-radius: 2px; } .busrowbtn a:hover { background: #f15a61; } .ltbrd { border-bottom: solid 1px #e8e8e8; padding-bottom: 13px; padding-top: 13px; transition: all 0.3s; } .ltbrd:hover { background: #f8f8f8; } .bcont { width: 100%; background: #f8f8f8; border-top: solid 2px #e8e8e8; min-height: 200px; padding: 30px; display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row ltbrd"> <div class="busrowmain"> <div class="busrow"> <li> BUS NO <br> <span>TN045</span></li> <li> BUS TYPE <br> <span>2*3 AC</span></li> <li> DEPARTURE TIME <br> <span>10:00 PM</span></li> <li> ARRIVAL TIME <br> <span>2:00 AM</span></li> <li> SEATS <br> <span>62</span></li> <li> FARE <br> <span>750</span></li> </div> <div class="busrowbtn"> <a href="#">BOOK NOW</a> </div> </div> <div class="bcont"> Bus Information content </div> </div> 

只需触发Book Now按钮上的click函数，然后使用parents()函数找到父元素并显示其下一个内容。

Answer 3

除了可以在Jquery中使用滑动切换功能之外，您始终可以将诸如show（）和hide（）之类的功能分开使用。