Question

使用jQuery幻灯片切换，点击ul中的项目后，切换到另一个ul中的相应项目。我无法将点击链接到ID并切换正确的ul项目。

jQuery是：

$(document).ready(function() {

//on click of subservices list item toggle down the corresponding subservices item

$(".subServices").find("li").hide().end() // Hide all other ULs
.click(function(e) {
    if (this == e.target) {  // if the handler element is where the event originated
        $(this).children('ul.subServicesList.subServiceItem').slideToggle('fast');
    }
});
});

任何人都可以提供帮助：）

Fiddle here

Answer 1

首先，元素的ID必须是唯一的，因此您不能对subServices和SubServicesList使用相同的ID。在下面的解决方案中，我们使用data-target的{{1}}属性。

此外，您需要将处理程序注册到subServices元素，而不是.SubServicesList a

SubServicesList

$(document).ready(function() {

  //on click of subservices list item toggle down the corresponding subservices item

  $(".subServices > li").hide().end() // Hide all other ULs
  $('.SubServicesList a').click(function(e) {
    $('#' + $(this).data('target')).slideToggle()
  });
});

.SubServicesList {
  display: block;
  width: 55%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.SubServicesList li {
  display: inline;
  list-style: none;
  list-style-type: none;
  margin-right: 10px;
  text-align: center;
  line-height: 26px;
  cursor: pointer;
}
.SubServicesList li a:hover {
  color: #333333;
}
.subServices {
  width: 75%;
  margin: 0 auto;
}
.subServices li.subServiceItem {
  display: block;
  list-style: none;
  list-style-type: none;
  height: auto;
  clear: both;
}
.subServices li.subServiceItem .image {
  float: left;
  display: block;
  margin-right: 10px;
  margin-bottom: 10px;
}
.subServices li.subServiceItem .image {
  float: left;
  display: block;
}
/*.subServices li.subServiceItem { display:none; } */

Answer 2

我就这样做了

$(".SubServicesList > li > a").click(function () {
    $(".subServices>li").hide();
    $(".subServices").find("li[id='" + $(this).attr('id') + "']").slideToggle(true);
});

Here is the JSFiddle

jQuery slide切换相应的服务项

2 个答案: