僅在單擊按鈕時切換 div

Question

jQuery新手在這里，我希望有人可以提供幫助。

當單擊具有類.ventures-minorities的 div 時，我有一個功能，它會在單擊時更改高度以顯示/隱藏.logos-wrapper - 並且具有類.expander的按鈕會相應地切換文本 - “了解更多”到“關閉” - 點擊時。

按鈕和 div 正在按預期工作和切換，但是如何使.logos-wrapper僅在單擊.expander按鈕時出現？

現在.logos-wrapper容器可以在我單擊它周圍的任何位置時進行切換，這可能與.ventures-minorities容器相關聯，但我不知道如何使.logos-wrapper僅在.expander按鈕被點擊。

這是一個問題，因為當在按鈕外部單擊 div 時，它會切換，但按鈕文本不會。 我不確定如何將這兩者聯系在一起。

 (function($) { $(document).ready(function() { $('.expander .elementor-button-text').on('click', function() { if ($.trim($(this).text()) == 'Learn more') { $(this).text('Close'); } else { $(this).text('Learn more'); } }); $(".ventures-minorities").on('click', function() { $(this).find(".logos-wrapper").toggleClass("sized"); }); }); })(jQuery);

 .logos-wrapper { height: 0; opacity: 0; transition: all 0.35s ease-in-out; } .sized { height: auto; opacity: 1; transition: all 0.35s ease-in-out; } .ventures-minorities { padding: 50px 0; } button { width: 150px; height: 50px; background-color: darkslateblue; border-radius: 10px; color: #fff; font-size: 18px; font-family: "Roboto"; border: none; letter-spacing: 1px; } button:hover { background-color: tomato; color: #000; } button:active { background-color: green; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="ventures-minorities"> <button class="expander"> <span class="elementor-button-text">Learn more</span> </button> <div class="logos-wrapper">content</div> </div> <div class="ventures-minorities"> <button class="expander"> <span class="elementor-button-text">Learn more</span> </button> <div class="logos-wrapper">content</div> </div>

Answer 1

您可以簡單地為按鈕.expander而不是父容器.ventures-minorities定義事件偵聽器。

要使切換起作用，您需要在找到.logos-wrapper之前使用方法parent()因為$(this)現在是按鈕，是.ventures-minorities的子項：

$(this).parent().find(".logos-wrapper").toggleClass("sized");

工作示例：

 (function($) { $(document).ready(function() { $('.expander .elementor-button-text').on('click', function() { if ($.trim($(this).text()) == 'Learn more') { $(this).text('Close'); } else { $(this).text('Learn more'); } }); $(".expander").on('click', function() { $(this).parent().find(".logos-wrapper").toggleClass("sized"); }); }); })(jQuery);

 .logos-wrapper { height: 0; opacity: 0; transition: all 0.35s ease-in-out; } .sized { height: auto; opacity: 1; transition: all 0.35s ease-in-out; } .ventures-minorities { padding: 50px 0; } button { width: 150px; height: 50px; background-color: darkslateblue; border-radius: 10px; color: #fff; font-size: 18px; font-family: "Roboto"; border: none; letter-spacing: 1px; } button:hover { background-color: tomato; color: #000; } button:active { background-color: green; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="ventures-minorities"> <button class="expander"> <span class="elementor-button-text">Learn more</span> </button> <div class="logos-wrapper">content</div> </div> <div class="ventures-minorities"> <button class="expander"> <span class="elementor-button-text">Learn more</span> </button> <div class="logos-wrapper">content</div> </div>

---

在這種情況下，您可以組合兩個事件偵聽器。

要使文本交換正常工作，您必須find()保存文本的跨度，最好使用單獨的 var，以防止重復：

$('.expander').on('click', function() {
  const text_span = $(this).find(".elementor-button-text");
      
  if ($.trim(text_span.text()) == 'Learn more') {...

工作示例：

 (function($) { $(document).ready(function() { $('.expander').on('click', function() { const text_span = $(this).find(".elementor-button-text"); if ($.trim(text_span.text()) == 'Learn more') { text_span.text('Close'); } else { text_span.text('Learn more'); } $(this).parent().find(".logos-wrapper").toggleClass("sized"); }); }); })(jQuery);

 .logos-wrapper { height: 0; opacity: 0; transition: all 0.35s ease-in-out; } .sized { height: auto; opacity: 1; transition: all 0.35s ease-in-out; } .ventures-minorities { padding: 50px 0; } button { width: 150px; height: 50px; background-color: darkslateblue; border-radius: 10px; color: #fff; font-size: 18px; font-family: "Roboto"; border: none; letter-spacing: 1px; } button:hover { background-color: tomato; color: #000; } button:active { background-color: green; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="ventures-minorities"> <button class="expander"> <span class="elementor-button-text">Learn more</span> </button> <div class="logos-wrapper">content</div> </div> <div class="ventures-minorities"> <button class="expander"> <span class="elementor-button-text">Learn more</span> </button> <div class="logos-wrapper">content</div> </div>