javascript - 无法获取 jQuery 和 Javascript If 语句以根据对象单击取消选择/选择类

Question

我正在尝试使用单击功能来关闭手风琴项并从所有其他元素中删除类，除了我正在与之交互的元素

我尝试了各种具有不同参数的 if 语句。

// Container For Each Accordion Item
var $expandeditemcontainer = $('.expand-wrapper');

// Accordion/Card Head - Summary Box - Once Clicked Expands .expanded-box
var $expandingsummarybox = $('.expander');

// Accordion/Card Body - Expanded Box That Appears Underneath - Absolutely Positioned - Out Of Document Flow
var $expandedbox = $('.expanded-box');

// Ghost Div replicating Accordion/Card Body's Height - Relatively Positioned - In Document Flow
var $expandedboxspacer = $('.expand-box-height-clearance');

// When $expandingsummarybox is clicked
$($expandingsummarybox).click(function() {

  /** .expand-focus creates outline on $expandingsummarybox once accordion is opened **/

  // If any $expandingsummarybox has a class .expander-focus applied
  if ($($expandingsummarybox).hasClass('expander-focus')) {
    // Remove .expander-focus from all $expandingsummarybox's
    $($expandingsummarybox).removeClass('expander-focus');
    // Close all Accordion Item's
    $($expandingsummarybox).closest($expandeditemcontainer).find($expandedboxspacer).slideUp(200, 'swing');

    // If any $expandingsummarybox does NOT have .expander-focus applied
  } else if (!$($expandingsummarybox).hasClass('expander-focus')) {
    // Add .expander-focus to this specific  $expandingsummarybox
    $(this).addClass('expander-focus');
    // Open this specific Accordion Item 
    $(this).closest($expandeditemcontainer).find($expandedboxspacer).slideDown(200, 'swing');

  } else {
    // These were the parameters I was originally using affecting that specific item
    $(this).toggleClass('expander-focus');
    $(this).closest($expandeditemcontainer).find($expandedboxspacer).slideToggle(200, 'swing');
  }
});

在与最初单击的项目交互时工作，但在尝试通过不同的方法关闭或单击另一个手风琴项目时它会中断。

标签： javascriptjquery

Answer 1

我可以在您的点击处理程序中看到一些逻辑错误，但没有更多关于它是什么/如何破坏的详细信息，这可能不是一个完整的解决方案。

您的问题是 if/else-if 块中的控制流。第一次.expander单击它会正确打开。但是，如果您单击不同的.expander内容，它将点击 if 语句块并关闭所有.expander-box但从未真正打开.expander被单击的内容。

要解决此问题，您应首先确定.expander所单击的是打开还是关闭。然后，您可以关闭所有.expander框。最后，如果.expander单击的那个最初是关闭的，您可以打开它。否则，如果扩展器已打开，则关闭所有.expander框会为您关闭它。

const $expandeditemcontainer = $('.expand-wrapper');
const $expandingsummarybox = $('.expander');
const $expandedbox = $('.expanded-box');
const $expandedboxspacer = $('.expand-box-height-clearance');

$expandingsummarybox.click(function() {

    const isCurrentExpanded = $(this).hasClass("expander-focus");

    // Remove .expander-focus from all $expandingsummarybox's
    $expandingsummarybox.removeClass('expander-focus');

    // Close all Accordion Item's
    $expandingsummarybox.closest($expandeditemcontainer).find($expandedboxspacer).slideUp(200, 'swing');

    if (!isCurrentExpanded) {
        // The clicked expander was closed originally lets open it
        $(this).addClass('expander-focus');
        $(this).closest($expandeditemcontainer).find($expandedboxspacer).slideDown(200, 'swing');
    }

});