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（）之类的功能来分开，这将起作用。

单击锚标记时如何显示div

3 个答案: