jQuery僅切換一項

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腳本

    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();
});