Question

我有一个我已经制作的列表<li>，其中我有一些跨度。这是html

<ul class="tracking_nav nav nav-tabs nav-stacked">  
<li class="tracking_list_type" style=".tracking_list_type:hover{background-color:none !important}">  
<a href="#"><span class="topinfo"><span class="number_plates"><img src="u_online.gif" />Number 10</span></span><span class="moving_status">76 moving</span><br/><span class="link_text">Brother David Cameroon</span></a><span class="linkso"><a href="">Tracking</a><a href="">Playback</a><a href="">Commands</a></span></li>     
<li class="tracking_list_type" style=".tracking_list_type:hover{background-color:none !important}">  
<a href="#"><span class="topinfo"><span class="number_plates"><img src="u_online.gif" />Number 10</span></span><span class="moving_status">76 moving</span><br/><span class="link_text">Brother David Cameroon</span></a><span class="linkso"><a href="">Tracking</a><a href="">Playback</a><a href="">Commands</a></span></li> 
<li class="tracking_list_type" style=".tracking_list_type:hover{background-color:none !important}">  
<a href="#"><span class="topinfo"><span class="number_plates"><img src="u_online.gif" />Number 10</span></span><span class="moving_status">76 moving</span><br/><span class="link_text">Brother David Cameroon</span></a><span class="linkso"><a href="">Tracking</a><a href="">Playback</a><a href="">Commands</a></span></li> 
<li class="tracking_list_type" style=".tracking_list_type:hover{background-color:none !important}">  
<a href="#"><span class="topinfo"><span class="number_plates"><img src="u_online.gif" />Number 10</span></span><span class="moving_status">76 moving</span><br/><span class="link_text">Brother David Cameroon</span></a><span class="linkso"><a href="">Tracking</a><a href="">Playback</a><a href="">Commands</a></span></li> 
</ul>

默认情况下，我隐藏了<span class="linkso"><a href="">Tracking</a><a href="">Playback</a><a href="">Commands</a></span>，显示它的唯一方法是点击<li class="tracking_list_type">....</li>，其中包含<span class="linkso"><a href="">Tracking</a><a href="">Playback</a><a href="">Commands</a></span> 点击li后，我希望显示带有linkso类的div，如果我点击另一个li，我希望显示该linkso {和另一个linkso可见隐藏。

这是我的代码https://jsfiddle.net/codebreaker87/eoo87zkk/13/

如何修复我的代码？。

Answer 1

除了jQuery 1.4，它没有on方法，你还有其他问题，比如

.linkso是li的后代，因此您需要使用.find()

＆＃13;

jQuery(function() {
  $(".tracking_list_type").click(function() {
    var $linkso = $(this).find(".linkso").toggle();
    $(".tracking_list_type .linkso").not($linkso).hide();
  });
});

＆＃13;

.moving_status {
  float: right;
  color: #76EE00;
  font-weight: bold;
}
.linkso {
  margin-left: 13px;
  display: none;
}
.topinfo {
  display: inline-block;
  margin-bottom: 5px;
}
.linkso > a {
  margin-right: 4px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<ul class="tracking_nav nav nav-tabs nav-stacked">
  <li class="tracking_list_type" style=".tracking_list_type:hover{background-color:none !important}">
    <a href="#"><span class="topinfo"><span class="number_plates"><img src="u_online.gif" />Number 10</span></span><span class="moving_status">76 moving</span><br/><span class="link_text">Brother David Cameroon</span></a><span class="linkso"><a href="">Tracking</a><a href="">Playback</a><a href="">Commands</a></span>
  </li>
  <li class="tracking_list_type" style=".tracking_list_type:hover{background-color:none !important}">
    <a href="#"><span class="topinfo"><span class="number_plates"><img src="u_online.gif" />Number 10</span></span><span class="moving_status">76 moving</span><br/><span class="link_text">Brother David Cameroon</span></a><span class="linkso"><a href="">Tracking</a><a href="">Playback</a><a href="">Commands</a></span>
  </li>
  <li class="tracking_list_type" style=".tracking_list_type:hover{background-color:none !important}">
    <a href="#"><span class="topinfo"><span class="number_plates"><img src="u_online.gif" />Number 10</span></span><span class="moving_status">76 moving</span><br/><span class="link_text">Brother David Cameroon</span></a><span class="linkso"><a href="">Tracking</a><a href="">Playback</a><a href="">Commands</a></span>
  </li>
  <li class="tracking_list_type" style=".tracking_list_type:hover{background-color:none !important}">
    <a href="#"><span class="topinfo"><span class="number_plates"><img src="u_online.gif" />Number 10</span></span><span class="moving_status">76 moving</span><br/><span class="link_text">Brother David Cameroon</span></a><span class="linkso"><a href="">Tracking</a><a href="">Playback</a><a href="">Commands</a></span>
  </li>
</ul>

＆＃13;

切换li元素内的span的可见性失败

1 个答案: