jQuery 切换列表菜单问题

Question

当我单击该部分内的跨度时，应该只切换该部分内的列表。但是发生的是每个部分中的每个列表都被切换，而不仅仅是属于我正在单击的部分的列表。

HTML:

<section class="tutorial-box">
  <p>
    <a href="#">Link #1</a>
    <br />
    Some text.
    <br />
    <span class="view-contents plus-sign">Click Here</span>
  </p>

  <ul class="tutorial-box-list">
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
  </ul>

  <div class="clear"> </div> <!-- end div class clear -->
</section> <!-- end section class tutorial-box -->

<section class="tutorial-box">
  <p>
    <a href="#">Link #2</a>
    <br />
    Some more text.
    <br />
    <span class="view-contents plus-sign">Click Here</span>
  </p>

  <ul class="tutorial-box-list">
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
  </ul>

  <div class="clear"></div> <!-- end div class clear -->

</section> <!-- end section class tutorial-box -->

CSS:

.tutorial-box{
  clear: both;
  width: 100%;
  height: auto;
  margin: 5px 0 10px 0;
  padding: 0;
}
.tutorial-box p{
  margin: 5px 0;
  padding: 0;
}
.view-contents{
  margin: 0;
  padding: 0 0 0 20px;
  cursor: pointer;
}
.plus-sign{
  margin: 0;
  padding: 0 0 0 20px;
  background: url("../images/plus-icon.png") 0 0 no-repeat;
}
.minus-sign{
  margin: 0;
  padding: 0 0 0 20px;
  background: url("../images/minus-icon.png") 0 0 no-repeat;
}

jQuery / JavaScript:

$(document).ready(function(){
  $('.tutorial-box-list').hide();
  $('.view-contents').click(function() {
    if($('.tutorial-box span').hasClass('plus-sign')) {
      $('.tutorial-box-list').slideToggle('2000');
      $('.tutorial-box span').addClass('minus-sign').removeClass('plus-sign');
    }
    else {
      $('.tutorial-box-list').slideToggle('2000');
      $('.tutorial-box span').addClass('plus-sign').removeClass('minus-sign');
    }
  });

  $('.toggle').each(function(){
    $(this).find('.toggle-content').hide();
  });
});

jsFiddle link

任何帮助将不胜感激。

Answer 1

为什么，因为您正在尝试切换 class tutorial-box-list。您已将此 class 分配给两个内容。所以，代码同时切换了两个内容。

就用

$(this).parent().next().slideToggle('2000');

插入

$('.tutorial-box-list').slideToggle('2000');

这里是jsfiddle Demo

Answer 2

试试这个点击事件

$('.view-contents').click(function() {
      var section = $(this).closest('section');
      var sectionSpan =section.find('.tutorial-box span');
      var sectionList = section.find('.tutorial-box-list');
    if(sectionSpan.hasClass('plus-sign')) {
     sectionList.slideToggle('2000');
     sectionSpan.addClass('minus-sign').removeClass('plus-sign');
    }
    else {
      sectionList.slideToggle('2000');
     sectionSpan.addClass('plus-sign').removeClass('minus-sign');
    }
  });

Answer 3

您需要找到与被点击元素相关的元素，所以

jQuery(function ($) {
    $('.tutorial-box-list').hide();
    $('.view-contents').click(function () {
        var $this = $(this);
        $(this).closest('.tutorial-box').find('.tutorial-box-list').slideToggle('2000');
        $this.toggleClass('minus-sign plus-sign');
    });

    $('.toggle').each(function () {
        $(this).find('.toggle-content').hide();
    });
});

演示：Fiddle

Answer 4

抱歉，考虑到我在移动设备上。问题看起来就像每次您使用 $('.tutorial-box span') 它都会使用它在页面上找到的所有这些元素。如果您只想影响该元素，请使用

$(this)

并且它只会影响被点击的那个。如果您想访问父部分，请使用

$(this).closest('.tutorial-box')

如果您愿意，我可以启动笔记本电脑并为您创建一个 fiddle。

Answer 5

您可以尝试下面的代码，您可以使用 toggleClass 同时添加/删除 'plus-sign 和 minus-sign。并使用 closest 让父级 tutorial-box 找到 tutorial-box-list 来切换它。

$('.view-contents').click(function() {
      $(this).closest('.tutorial-box').find('.tutorial-box-list').slideToggle('2000');
      $(this).toggleClass('plus-sign minus-sign');
  });

JSFiddle Demo

Answer 6

你可以更新你的 js

jQuery
$(document).ready(function(){
  $('.tutorial-box-list').hide();
  $('.view-contents').click(function() {
    if($(this).hasClass('plus-sign')) {
      $(this).closest('.tutorial-box').find('.tutorial-box-list').slideToggle('2000');
      $(this).addClass('minus-sign').removeClass('plus-sign');
    }
    else {
      $(this).closest('.tutorial-box').find('.tutorial-box-list').slideToggle('2000');
      $(this).addClass('plus-sign').removeClass('minus-sign');
    }
  });

});

jQuery 切换列表菜单问题

jQuery toggle list menu issue

javascript

jquery

html

css

toggle