如何不將toggle（）應用於已經具有display：none的div元素？

Question

我正在嘗試將slideToggle（）jQuery函數用於我的網頁。

有一些div元素已經具有“display：none”樣式。 這些元素將來可以使用，所以我只是讓它們不顯示。 問題是這些元素也會響應切換方法，這樣每當我點擊按鈕時，它也會出現並且很快消失但很難看。 我不希望這些元素被顯示出來。

以下是簡化示例。

 $(document).ready(function(){ var toggleBtn = $(".toggle-button"); toggleBtn.click(function(){ $(this).parent().find("div:not('.toggle-button')").slideToggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="wrapper"> <div class="toggle-button">Click</div> <div class="need-toggle-A">A</div> <div class="need-toggle-B">B</div> <div class="need-toggle-C">C</div> <div class="need-toggle-D"> <div class="need-no-toggle-A" style="display:none">Please Don't show me!</div> <div class="need-no-toggle-B" style="display:none">Please Don't show me!!</div> <div class="need-no-toggle-C" style="display:none">Please Don't show me!!!</div> </div> </div> 

Answer 1

您可以使用附加:not() inside來僅選擇不包含類need-no-toggle的元素

:not([class*='need-no-toggle'])

class* = 'need-no-toggle檢查包含 class need-no-toggle元素

有關class*=更多信息class*=閱讀此css-tricks

 $(document).ready(function(){ var toggleBtn = $(".toggle-button"); toggleBtn.click(function(){ $(this).parent().find("div:not('.toggle-button'):not([class*='need-no-toggle'])").slideToggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="wrapper"> <div class="toggle-button">Click</div> <div class="need-toggle-A">A</div> <div class="need-toggle-B">B</div> <div class="need-toggle-C">C</div> <div class="need-toggle-D"> <div class="need-no-toggle-A" style="display:none">Please Don't show me!</div> <div class="need-no-toggle-B" style="display:none">Please Don't show me!!</div> <div class="need-no-toggle-C" style="display:none">Please Don't show me!!!</div> </div> </div> 

Answer 2

您可以使用相同的類名來切換

 <div class="need-toggle-A need-toggle">A</div>
  <div class="need-toggle-B need-toggle">B</div>
  <div class="need-toggle-C need-toggle">C</div>

然后單獨切換

  $(this).parent().find(".need-toggle").slideToggle(); 

Jsfiddle https://jsfiddle.net/nznrru01/

Answer 3

另一個解決方案是，為了使代碼清晰，您應該重命名該類，以便將要切換的部分與您不想要的部分區分開來。 例如：

<div class="wrapper">
  <div class="toggle-button">Click</div>

  <div class="need-toggle-A">A</div>
  <div class="need-toggle-B">B</div>
  <div class="need-toggle-C">C</div>
  <div class="need-no-toggle"> <!-- Change class name here -->
    <div class="need-no-toggle-A" style="display:none">Please Don't show me!</div>
    <div class="need-no-toggle-B" style="display:none">Please Don't show me!!</div>
    <div class="need-no-toggle-C" style="display:none">Please Don't show me!!!</div>

  </div>

</div>

然后，您可以在find()函數中使用此選擇器： div[class^='need-toggle'] 。