点击后使元素可见和隐藏

Question

我正在尝试在点击时使元素#mask123可见或隐藏。默认情况下，该元素是隐藏的，但当我点击它时会变为可见状态。以下js代码可以在第一次点击时工作，元素会变为可见状态。现在，我想单击同一按钮#menu-btn-toggle并将该元素切换为不可见模式，但我无法使其起作用。我在这里使用了内联css。虽然这是一个简单的情况，但我的有限的js知识没有帮助到我。

   <div id="menu-btn">
      <a href="#" title="Menu" id="menu-btn-toggle" class="menu-icon-link" onclick="showMask();">
    </div>

HTML代码

<div class="side-nav--mask">
    <div class="js-side-nav-mask liquid-container">
        <div id="mask123" class="liquid-child" style="visibility: hidden; top: 0px; left: 0px; opacity: 1;"></div>
    </div>
</div>

这是我的JS代码：

<script type="text/javascript">
    function showMask() {
        var node = document.getElementById('mask123')
        node.style.visibility = 'visible';
    }
</script>

当我尝试使用以下条件时，它不起作用：

<script type="text/javascript">
    function showMask() {
        var node = document.getElementById('mask123')
        node.style.visibility = 'visible';
        if node.is(":visible") {
            node.style.visibility = 'hidden';
        }
    }
</script>

- Anay Bose

Answer 1

function showMask() {
    var node = document.getElementById('mask123');
    if (node.style.visibility=='visible') {
        node.style.visibility = 'hidden';
    }
    else
        node.style.visibility = 'visible'
}

这是应该如何使用if条件语句的示例：)

- misss-popcorn

---

@ Urvashi，感谢您的时间。我已经为您点赞了。 - Anay Bose

Answer 2

尝试根据其当前值切换visibility属性。

function showMask() {
    var node = document.getElementById('mask123')
    var visibility = node.style.visibility;
    node.style.visibility = visibility == "visible" ? 'hidden' : "visible"
}

您正在访问jquery的is()函数，但是该函数无法在普通节点对象中调用。普通节点对象的原型中没有名为is的函数。

- Rajaprabhu Aravindasamy

Answer 3

.is 是一个jQuery方法。要使用它，您首先需要使用jQuery包装您的元素/选择器 - $('#mask123').is(':visible')。

但实际上，您并不需要jQuery来完成这个操作，您可以使用基本的JS：

function showMask() {
    var node = document.getElementById('mask123')
    if (node.style.visibility === 'visible') {
        node.style.visibility = 'hidden';
    } else {
        node.style.visibility = 'visible';
    }
}

- bcherny

Answer 4

如果您不介意使用jQuery，您可以使用一个简单的函数和CSS类：

// after removing onclick="" attribute from html 

$('#menu-btn-toggle').click(function(){
  $('#mask123').toggleClass('visible');
});

#mark123.visible{
  visibility: visible;
}

请注意，在这种情况下，您还必须指定#mask123最初是隐藏的，以便进行可见过渡。

因此，您需要将以下内容添加到您的CSS中。

#mask123 {
  visibility:hidden; /* initial state = hidden */
}

-

工作中的jsFiddle

- fbid

---

@dbf 他/她在问题中包含了jQuery标签，所以他/她可能不会是一个初学者。 - fbid

你仍然问他是否介意，这将是一个更完整的答案，无论使用还是不使用jQuery。我猜jQuery标签将从OQ中删除。 - dbf

@dbf 没问题，同时使用两种解决方案确实更好。我只是使用了jQuery来提供另一种解决方案，我认为这种方式更简洁明了。因为另一个用户已经发布了一个很好的纯JavaScript解决方案，我不想抄袭他的作品，就这么简单。:) - fbid

好的，那就习惯“借鉴”吧，如果你这么称呼它的话。其实这并不是偷窃，因为编写代码只有几种方法，你不必担心版权问题。如果别人已经发布了相应的解决方案，那就在他的名字后面加上注释以示致谢 ;) - dbf

Answer 5

使用ClassList.toggle，并且由于您正在使用内联代码，您需要使用important。

var btn = document.querySelector("#menu-btn-toggle"),
    mask123 = document.querySelector("#mask123");
function classToggle() {
      mask123.classList.toggle("visible")  
    }
btn.addEventListener("click", classToggle, false)

#mask123.visible{
    visibility: visible!important;
  }

<div id="menu-btn">
      <a href="#" title="Menu" id="menu-btn-toggle" class="menu-icon-link">Click to toggle </a>
    </div>

<div class="side-nav--mask">
    <div class="js-side-nav-mask liquid-container">
        <div id="mask123" class="liquid-child" style="visibility: hidden; top: 0px; left: 0px; opacity: 1;">Some text</div>
    </div>
</div>

- Gildas.Tambo