Javascript显示在单击的项目下
我有车名列表，当用户点击它时，我想在其行下显示模型列表。但是现在当我点击它时会分割行。我怎么能这样做？
JS小提琴http://jsfiddle.net/dS2vA/3/
Page First Load
当我点击其中一个时
我想要那样做
<div class="row">
<div class="col-md-3">
<img src="//otobilge.com/Images/Resimler/thumb/Mazda-2-HB-3K-2008-2010-0.jpg" class="img img-thumbnail img-responsive" onclick="ShowModels('model_290')" />
<p>2 Serisi</p>
</div>
<div id="model_290" class="modellerList">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<ul>
<li>
<span> 2 Hatchback 3 Kapı</span>
<span><a href="#" class="btn btn-info"> 2010-</a></span>
<span><a href="#" class="btn btn-info"> 2008-2010</a></span>
</li>
<hr />
<li>
<span> 2 Hatchback 5 Kapı</span>
<span><a href="#" class="btn btn-info"> 2010-</a></span>
<span><a href="#" class="btn btn-info"> 2007-2010</a></span>
</li>
<hr />
<li>
<span> 2 MPV 5 Kapı</span>
<span><a href="#" class="btn btn-info"> 2006-2008</a></span>
<span><a href="#" class="btn btn-info"> 2003-2006</a></span>
</li>
<hr />
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<img src="//otobilge.com/Images/Resimler/thumb/Mazda-6-Sedan-4K-2002-2005-0.jpg" class="img img-thumbnail img-responsive" onclick="ShowModels('model_291')" />
<p>6 Serisi</p>
</div>
<div id="model_291" class="modellerList">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<ul>
<li>
<span> 6 Sedan 4 Kapı</span>
<span><a href="#" class="btn btn-info"> 2013-</a></span>
<span><a href="#" class="btn btn-info"> 2010-2012</a></span>
<span><a href="#" class="btn btn-info"> 2007-2010</a></span>
<span><a href="#" class="btn btn-info"> 2005-2007</a></span>
<span><a href="#" class="btn btn-info"> 2002-2005</a></span>
</li>
<hr />
<li>
<span> 6 SportBreak Station Wagon 5 Kapı</span>
<span><a href="#" class="btn btn-info"> 2012-</a></span>
<span><a href="#" class="btn btn-info"> 2010-2012</a></span>
<span><a href="#" class="btn btn-info"> 2008-2010</a></span>
<span><a href="#" class="btn btn-info"> 2005-2007</a></span>
<span><a href="#" class="btn btn-info"> 2002-2005</a></span>
</li>
<hr />
<li>
<span> 6 Hatchback 5 Kapı</span>
<span><a href="#" class="btn btn-info"> 2010-2012</a></span>
<span><a href="#" class="btn btn-info"> 2008-2010</a></span>
</li>
<hr />
<li>
<span> 6 Sport Hatchback 5 Kapı</span>
<span><a href="#" class="btn btn-info"> 2005-2007</a></span>
<span><a href="#" class="btn btn-info"> 2002-2005</a></span>
</li>
<hr />
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<img src="//otobilge.com/Images/Resimler/thumb/Mazda-3-HB-5K-2003-2006-0.jpg" class="img img-thumbnail img-responsive" onclick="ShowModels('model_292')" />
<p>3 Serisi</p>
</div>
<div id="model_292" class="modellerList">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<ul>
<li>
<span> 3 Hatchback 5 Kapı</span>
<span><a href="#" class="btn btn-info"> 2014 - </a></span>
<span><a href="#" class="btn btn-info"> 2011-2013</a></span>
<span><a href="#" class="btn btn-info"> 2009-2011</a></span>
<span><a href="#" class="btn btn-info"> 2006-2009</a></span>
<span><a href="#" class="btn btn-info"> 2003-2006</a></span>
</li>
<hr />
<li>
<span> 3 Sedan 4 Kapı</span>
<span><a href="#" class="btn btn-info"> 2014 -</a></span>
<span><a href="#" class="btn btn-info"> 2011-2013</a></span>
<span><a href="#" class="btn btn-info"> 2009-2011</a></span>
<span><a href="#" class="btn btn-info"> 2006-2009</a></span>
<span><a href="#" class="btn btn-info"> 2003-2006</a></span>
</li>
<hr />
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<img <img src="//otobilge.com/Images/Resimler/thumb/resimyok.jpg" class="img img-thumbnail img-responsive" onclick="ShowModels('model_293')" />
<p>5 Serisi</p> </div>
<div id="model_293" class="modellerList">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<ul>
<li>
<span> 5 MPV 5 Kapı</span>
<span><a href="#" class="btn btn-info"> 2010-</a></span>
<span><a href="#" class="btn btn-info"> 2010 - </a></span>
<span><a href="#" class="btn btn-info"> 2008-2010</a></span>
<span><a href="#" class="btn btn-info"> 2005-2008</a></span>
<span><a href="#" class="btn btn-info"> 2005 - 2010</a></span>
</li>
<hr />
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<img src="//otobilge.com/Images/Resimler/thumb/Mazda-RX-8-Coupe-4K-2003-2008-0.jpg" class="img img-thumbnail img-responsive" onclick="ShowModels('model_294')" />
<p>RX-8</p>
</div>
<div id="model_294" class="modellerList">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<ul>
<li>
<span> RX-8 Coupe 4 Kapı</span>
<span><a href="#" class="btn btn-info"> 2003-2008</a></span>
</li>
<hr />
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<img src="//otobilge.com/Images/Resimler/thumb/Mazda-626-HB-5K-1991-1995-0.jpg" class="img img-thumbnail img-responsive" onclick="ShowModels('model_295')" />
<p>626</p>
</div>
<div id="model_295" class="modellerList">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<ul>
<li>
<span> 626 Hatchback 5 Kapı</span>
<span><a href="#" class="btn btn-info"> 1999-2002</a></span>
<span><a href="#" class="btn btn-info"> 1997-1999</a></span>
<span><a href="#" class="btn btn-info"> 1995-1998</a></span>
<span><a href="#" class="btn btn-info"> 1991-1995</a></span>
</li>
<hr />
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<img src="//otobilge.com/Images/Resimler/thumb/Mazda-323-Sedan-4K-1991-1995-0.jpg" class="img img-thumbnail img-responsive" onclick="ShowModels('model_296')" />
<p>323</p>
</div>
<div id="model_296" class="modellerList">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<ul>
<li>
<span> 323 Sedan 4 Kapı</span>
<span><a href="#" class="btn btn-info"> 2001-2003</a></span>
<span><a href="#" class="btn btn-info"> 1998-2001</a></span>
<span><a href="#" class="btn btn-info"> 1997-1998</a></span>
<span><a href="#" class="btn btn-info"> 1994-1997</a></span>
<span><a href="#" class="btn btn-info"> 1991-1995</a></span>
</li>
<hr />
<li>
<span> 323 FastBreak Hatchback 5 Kapı</span>
<span><a href="#" class="btn btn-info"> 2001-2003</a></span>
<span><a href="#" class="btn btn-info"> 1998-2001</a></span>
</li>
<hr />
<li>
<span> 323 P Hatchback 3 Kapı</span>
<span><a href="#" class="btn btn-info"> 1998-2001</a></span>
<span><a href="#" class="btn btn-info"> 1997-1998</a></span>
<span><a href="#" class="btn btn-info"> 1994-1997</a></span>
<span><a href="#" class="btn btn-info"> 1991-1995</a></span>
</li>
<hr />
<li>
<span> 323 Coupe 3 Kapı</span>
<span><a href="#" class="btn btn-info"> 1997-1998</a></span>
</li>
<hr />
<li>
<span> 323 Estate Station Wagon 5 Kapı</span>
<span><a href="#" class="btn btn-info"> 1990-1994</a></span>
</li>
<hr />
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<img src="//otobilge.com/Images/Resimler/thumb/mazda-cx-5-1[1].png" class="img img-thumbnail img-responsive" onclick="ShowModels('model_361')" />
<p>CX-5</p>
</div>
<div id="model_361" class="modellerList">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<ul>
<li>
<span> CX-5 5 Kapı</span>
<span><a href="#" class="btn btn-info"> 2012 -</a></span>
</li>
<hr />
</ul>
</div>
</div>
</div>
</div>
</div>
1 个答案:
答案 0 :(得分：0)
您可以在每行末尾制作特殊容器以进行说明，然后点击即可将其复制。
<强> http://jsfiddle.net/Tymek/vva4pwxq/ 请注意我修改了您的HTML
$(".row").append('<div class="col-md-12 info"></div>');
$("img").on("click", function(){
$(".info").html("");
$(this).closest(".row").find(".info").html($(this).siblings(".modellerList").html());
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？