Question

我尝试添加将切换我的页脚列的jQuery脚本，我的问题是如何停止切换所有项目。现在，当有人点击H4标签时，所有H4标签都会一起切换。

HTML：

<div class="row footer-cols">
    <div class="col-sm-7 five-three">
        <div class="row">
            <div class="col-sm-4">
                <h4>Information<span class="toggle"></span></h4>
                <div class="footer-cols-content">
                    <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Customer Service</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-4">
                <h4>Why buy from us<span class="toggle"></span></h4>
                <div class="footer-cols-content">
                    <ul>
                        <li><a href="#">Shipping & Returns</a></li>
                        <li><a href="#">Secure Shopping</a></li>
                        <li><a href="#">International Shipping</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

jQuery SCRIPT

    jQuery('.footer .footer-cols h4').append('<span class="toggle"></span>');
    jQuery('.footer h4').on("click", function(){
        if (jQuery(this).find('span').attr('class') == 'toggle opened') { jQuery(this).find('span').removeClass('opened').parents('.footer-cols').find('.footer-cols-content').slideToggle(); }
        else {
            jQuery(this).find('span').addClass('opened').parents('.footer-cols').find('.footer-cols-content').slideToggle();
        }
    });

Answer 1

您需要在跨度中添加内容，以便为用户提供点击内容

这个更改加/减并隐藏其他内容

$(function() {
  $(".footer-cols").find("h4").on("click", function() {
    var $content = $(this).parent().find(".footer-cols-content");
    var $span = $(this).find("span");
    if ($span.length==0) $(this).append('<span class="toggle" />');
    $(".footer-cols-content").not($content).hide();
    $content.slideToggle();
    $span.text($span.text() == "-" ? "+" : "-");
  });
});

动态添加范围：

    if ($span.length==0) {
      $span=$('<span class="toggle" />');
      $(this).append($span);
    }

$(function() {
  $(".footer-cols").find("h4").on("click", function() {
    var $content = $(this).parent().find(".footer-cols-content");
    var $span = $(this).find("span");
    if ($span.length==0) {
      $span=$('<span class="toggle" />');
      $(this).append($span);
    }
    $(".footer-cols-content").not($content).hide();
    $content.slideToggle();
    $span.text($span.text() == "-" ? "+" : "-");
  });
});

.footer-cols-content {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row footer-cols">
  <div class="col-sm-7 five-three">
    <div class="row">
      <div class="col-sm-4">
        <h4>Information </h4>
        <div class="footer-cols-content">
          <ul>
            <li><a href="#">About Us</a>
            </li>
            <li><a href="#">Customer Service</a>
            </li>
            <li><a href="#">Privacy Policy</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-sm-4">
        <h4>Why buy from us <span class="toggle">+</span></h4>
        <div class="footer-cols-content">
          <ul>
            <li><a href="#">Shipping & Returns</a>
            </li>
            <li><a href="#">Secure Shopping</a>
            </li>
            <li><a href="#">International Shipping</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

点击处理程序更改.parents('.footer-cols')

的.parents('.col-sm-4')

Answer 3

您还可以尝试以下代码：

jQuery('.footer .footer-cols h4').append('<span class="toggle"></span>');
    jQuery('.footer-cols h4').on("click", function(){
        if (jQuery(this).find('span').attr('class') == 'toggle opened') { jQuery(this).find('span').removeClass('opened').parent().next().slideToggle();
        }
        else {
            jQuery(this).find('span').addClass('opened').parent().next().slideToggle();
        }
    });

选择器的问题在于

parents('.footer-cols')

你基本上选择了

<div class="row footer-cols"></div>

顶部的

元素。因此

find('.footer-cols-content')

选择其中的所有子元素，使其全部为slideToggle()

Answer 4

我不确定你为什么要追加span课程，但如果我没有注意，只有幻灯片切换应该完成你打算做的工作。

jQuery('.footer-cols h4').on("click", function(){
     $(this).find('span').toggleClass('opened').end().next().slideToggle();
});

 jQuery('.footer-cols h4').on("click", function(){
             $(this).find('span').toggleClass('opened').end().next().slideToggle();
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row footer-cols">
    <div class="col-sm-7 five-three">
        <div class="row">
            <div class="col-sm-4">
                <h4>Information<span class="toggle"></span></h4>
                <div class="footer-cols-content">
                    <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Customer Service</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-4">
                <h4>Why buy from us<span class="toggle"></span></h4>
                <div class="footer-cols-content">
                    <ul>
                        <li><a href="#">Shipping & Returns</a></li>
                        <li><a href="#">Secure Shopping</a></li>
                        <li><a href="#">International Shipping</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

以上代码仅在footer-cols-content div始终位于h4旁边时才有效。为避免这种情况，您可以使用parent()。

jQuery('.footer h4').on("click", function(){
  $(this).parent().find('footer-cols-content').slideToggle();
});

jquery只切换一个项目

4 个答案: