如何刪除除一個以外的所有類

Question

我正在嘗試刪除類“ fa-minus”，除非它被元素的一部分觸發。 其他所有工作都很好，但是，我無法定位所有具有“ fa-minus”類的跨度，而不會影響單擊的下拉列表。 任何幫助表示贊賞，謝謝。

HTML

<div id="accordion">
        <h3 class="accordion-trigger">Do you lease to individuals and corporations?<span class="fa fa-fw fa-plus icons accordion-icon"></span></h3>
      <div class="accordion-content-container">
        <p>Cornerstone leases to all people who are in need of short term furnished housing:  business travelers, human resource/relocation departments, government personnel, and vacation travelers.  We also serve the insurance industry for displaced home owners in need of temporary furnished housing.</p>
      </div>


      <div class="hr1"></div>

      <h3 class="accordion-trigger">Are you the same as an extended stay hotel?<span class="fa fa-fw fa-plus icons accordion-icon"></span></h3>
      <div class="accordion-content-container">
        <p>No. We offer a full sized furnished apartment that is much larger than a hotel room and is fully equipped with all the comforts of home.</p>
      </div>

      <div class="hr1"></div>

      <h3 class="accordion-trigger">Is there a minimum stay?<span class="fa fa-fw fa-plus icons accordion-icon"></span></h3>
      <div class="accordion-content-container">
        <p>Yes, most locations have a 30 day minimum length of stay.</p>
      </div>
      <div class="hr1"></div>

      <h3 class="accordion-trigger">Can I bring my family pet?<span class="fa fa-fw fa-plus icons accordion-icon"></span></h3>
      <div class="accordion-content-container">
        <p>Yes you can, as we offer pet friendly properties in every city and area.  Most properties have a pet weight limit and breed restrictions, and require an additional pet deposit and/or pet fee.</p>
      </div>
      <div class="hr1"></div>

      <h3 class="accordion-trigger">How do I Pay?<span class="fa fa-fw fa-plus icons accordion-icon"></span></h3>
      <div class="accordion-content-container">
        <p>We accept Visa, MasterCard and American Express.  For companies paying by check, a major credit card is required on file.</p>
      </div>

      <div class="hr1"></div>

      <h3 class="accordion-trigger">Is there a fee for internet access?<span class="fa fa-fw fa-plus icons accordion-icon"></span></h3>
      <div class="accordion-content-container">
        <p>No, our apartments include high speed internet and Wi-Fi service at no additional charge.</p>
      </div>

      <div class="hr1"></div>

      <h3 class="accordion-trigger">Is phone service included?<span class="fa fa-fw fa-plus icons accordion-icon"></span></h3>
      <div class="accordion-content-container">
        <p>We have found that most of our guest use their cell phones and do not require land lines.  For additional questions please speak with a Cornerstone representative.</p>
      </div>

      <div class="hr1"></div>

      <h3 class="accordion-trigger">How do I get the keys to my apartment and check in?<span class="fa fa-fw fa-plus icons accordion-icon"></span></h3>
      <div class="accordion-content-container">
        <p>Once your reservation is confirmed we will send you your address and easy directions from the airport or major highway.  Typically guest should plan to arrive during office hours.  Late check in can be arranged but may require an additional fee.</p>
      </div>

      <div class="hr1"></div>

      <h3 class="accordion-trigger">What are the check in and check out times?<span class="fa fa-fw fa-plus icons accordion-icon"></span></h3>
      <div class="accordion-content-container">
        <p>Typically check in is at 2pm and check out is at 11am.</p>
      </div>

    </div> <!-- accordion end -->

JS

$(document).ready(function($) {
 $('#accordion').find('.accordion-trigger').click(function(){

 //Expand or collapse this panel

 $(this).next().slideToggle('fast');
 $(this).find('span').toggleClass('fa-minus');

 //Hide the other panels

 $(".accordion-content- container").not($(this).next()).slideUp('fast');

 // remove classes 'fa-minus' unless its part of the accordion being triggered

 });
});

Answer 1

這樣的事情應該讓您入門：

jsFiddle演示

$(".accordion-content-container").hide();

$('.accordion-trigger').click(function() {
   //Expand or collapse this panel
   $(this).next().slideToggle('fast');
   $(this).find('span').toggleClass('fa-minus');

   //Hide the other panels
   $(".accordion-content-container").not($(this).next()).slideUp('fast');

   // remove classes 'fa-minus' unless its part of the accordion being triggered
    $('span').removeClass('fa-minus');
   $(this).find('span').addClass('fa-minus');
});

---

筆記：

（1）您可以只使用$('.accordion-trigger').click代替$('#accordion').find('.accordion-trigger').click

（2）我添加了$(".accordion-content-container").hide(); 在javascript中最初隱藏所有內容div。

Answer 2

謝謝您的幫助。 我最后將手風琴的每個部分包裝在一個容器中，以更好地利用可用的JQuery方法。 我附加了.parent（）。find（'span'）。removeClass（'fa-minus'）; 到$（“。accordion-content-container”）。not（$（this）.next（））。slideUp（'fast'）。 這是我最初嘗試做的事情，只是我沒有足夠仔細地閱讀文檔，並試圖以錯誤的方式使用'parent（）'。

1. $（“。accordion-content-container”）。not（$（this）.next（））。slideUp（'fast'）

這行代碼已經是刪除“ fa-minus”類所需的地方，我只是很難遍歷使用“ fa-minus”類將DOM返回到跨度。

2. 將手風琴的每個部分包裹在“ acccordion-container” div中可以使用parent（）。 當這行代碼執行時，這種方式是：

   $（“。accordion-content-container”）。not（$（this）.next（））。slideUp（'fast'）;

我可以遍歷DOM到最接近的父級，即.accordion（但現在是.accordion-container）。

3. $（“。accordion-content-container”）。not（$（this）.next（））。slideUp（'fast'）。parent（）。find（'span'）。removeClass（'fa-minus'） ;

最終，在關閉“ accordion-content-container”的情況下，“ parent（）”返回“ accordion-container”，然后找到<span>並刪除類“ fa-minus”。

我希望像往常一樣，每天我都在學習新知識。