Question

我正在尝试在点击时使元素double * vec; // aligned properly #pragma omp parallel for schedule(static, 512) for (int i = 0; i < size; i += 2) { _mm_store_pd(vec + i, _mm_cvtps_pd(_mm_cvtpd_ps(_mm_load_pd(vec + i)))); }可见或隐藏。默认情况下，该元素是隐藏的，但是当我单击它时它变得可见。下面的js在第一次点击时起作用，元素变为可见。现在，我想点击相同的按钮#mask123，元素切换到隐形模式，我无法使其工作。我在这里使用内联css。这是一个简单的案例，但我对js的有限知识并没有帮助我。

#menu-btn-toggle

html代码

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

这是我的JS：

<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>

当我尝试某个条件（如下）时，它不起作用：

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

Answer 1

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

这是你应该如何使用你的if条件：）

Answer 2

尝试根据visibility属性的当前值切换function showMask() { var node = document.getElementById('mask123') var visibility = node.style.visibility; node.style.visibility = visibility == "visible" ? 'hidden' : "visible" }属性

is()

您正在通过普通节点对象访问jquery的$('#departure, #alarm').change(function() { var date = $('#departure').val(); var time = $('#alarm').val(); var newtime = time+':00'; var dateTime = new Date(date + ' ' + time); var now = new Date; var today = new Date(); var datetimediff = dateTime; var diffMs = (datetimediff - today); var diffDays = Math.round(diffMs / 86400000); // days var diffHrs = Math.round((diffMs % 86400000) / 3600000); // hours var diffMins = Math.round(((diffMs % 86400000) % 3600000) / 60000); // minutes if(diffDays > 0) { $('#timeuntil').html('In ' + diffDays + ' days'); } else if(diffHrs > 0) { $('#timeuntil').html('In ' + diffHrs + ' hours'); } else if(diffMins > 0) { $('#timeuntil').html('In ' + diffMins + ' mins'); } else { $('#timeuntil').html('Date is in the past'); } });函数。 Node对象没有在其原型中调用的函数。

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';
    }
}

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 */
}

-

Working jsFiddle

Answer 5

使用ClassList.toggle，因为您使用的是内联代码，所以需要重要的

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

使元素可见并在单击时隐藏

5 个答案: