Question

显示菜单叠加层时，我试图隐藏类.search-container-inner input的搜索框。它具有.overlay.style-light-bg类。

我无法在CSS上使用它，因为它们没有直接关系，并且搜索框位于HTML的叠加层之前。

我尝试从上一篇文章中编辑此解决方案：

// Show an element
var show = function (elem) {
    elem.style.display = 'block';
};

// Hide an element
var hide = function (elem) {
    elem.style.display = 'none';
};

// Toggle element visibility
var toggle = function (elem) {

    // If the element is visible, hide it
    if (window.getComputedStyle(elem).display === 'block') {
        hide(elem);
        return;
    }

    // Otherwise, show it
    show(elem);

    };

但无济于事。

Answer 1

这是一个近似值：

var toggle = function (elem) {
if(!elem.classList.contains(class);)
elem.classList.toggle('hidden');
}

Answer 2

我不知道叠加层的调用或显示方式，但是您可以检查该类是否存在，然后像这样将set.contains(k)更改为display：

search box

它会运行一次，但是您也可以将其包装到一个函数中，以便在需要时调用。

Answer 3

由于您已经编写了show hide和toggle函数的代码奠定了基础，因此根据您的要求剩下的就是调用它们。

var overlay = document.querySelector('.overlay.style-light-bg');
var search = document.querySelector('.search-container-inner input');

if (window.getComputedStyle(overlay).display === 'block') {
    hide(search);
    return;
}

现在，在显示叠加层时调用上面的代码

Answer 4

您可以使用MutationObserver来实现所需的行为。它提供了监视对DOM树所做的特定更改并调用回调函数来处理更改的功能。它具有对IE 11的浏览器支持。

这是包含神奇的doSomething()函数的基本代码。

function doSomething() {
  var overlay = window.getComputedStyle(document.querySelector('.overlay.style-light-bg')).display
  var searchInput = document.querySelector('.search-container-inner input')
  searchInput.style.display = (overlay == 'block') ? 'none' : 'block'      
}

// The following code uses MutationObserver to call `doSomething()` when needed

// Handle to the DOM element that will be observed
var overlayNode = document.querySelector('.overlay.style-light-bg')
// Configure the observer to watch for changes to the element's attributes only
var observerConfig = { attributes: true }

// Callback function to execute when mutations are observed
var observerCallback = function(mutationsList, observer) {
  for (var mutation of mutationsList) {
    if (mutation.type == 'attributes') {
      console.log('The ' + mutation.attributeName + ' attribute was modified.')
      if (mutation.attributeName == 'style' || mutation.attributeName == 'class') {
        // handle the mutation of the overlay element's style or class list
        doSomething()
      }
    }
  }
}

// Create a `MutationObserver` instance linked to the `observerCallback` function
var overlayObserver = new MutationObserver(observerCallback);

// Start observing the overlay node for configured mutations
overlayObserver.observe(overlayNode, observerConfig);

根据叠加层的变化方式，控制台输出将显示：

The style attribute was modified.

或

The class attribute was modified.

当另一个可见时隐藏div

4 个答案: