无法读取未定义的值 'visibility' - J

Question

我正在使用 jQuery。每当调用 menu.tog 函数时，它似乎忘记了 'this' （菜单）是什么。我还尝试在函数中用 'menu' 替换 'this' 。

    var usn = $("#userstuff");
var menu = $('#userinfo');

menu.height('0px');

menu.tog=function()
{
if (menu.css('visibility','hidden')=='hidden')
    menu.css('visibility','visible');
else
    menu.css('visibility','hidden');
}

Answer 1

这应该有效：

// only use 'menu', not '$(menu)' and don't write 'px'
// or in one row: var menu = $('#userinfo').height(0);
var menu = $('#userinfo');
menu.height(0);

// however your `tog` function is called, there may be not referenced
// to 'this', instead use 'menu'
// but keep in mind, 'menu' is a jQuery object here, not a DOM element
menu.tog = function() {
    if ( menu.css("visibility") == "hidden" ) {
        menu.css("visibility", "visible");
    }
    else {
        menu.css("visibility", "hidden");
    }

    // or in one line too:
    // menu.css("visibility", menu.css("visibility") == "hidden" ? "visible" : "hidden");
};

menu.tog();

Answer 2

如果您只需要切换可见性，只需这样做：

$('#toggle').click(function() {
  $('#test').toggle();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="test">TOGGLE ME</span>
</br>
<button id="toggle">CLICK TO TOGGLE</button>

Answer 3

要正确扩展 jquery，请使用 jQuery.fn.extend。然后，当您引用它时，您将引用正确的对象。

   jQuery.fn.extend({
     tog: function() {
       return this.each(function() {
           this.style.visibility = this.style.visibility == 'hidden' ? 'visible':'hidden';
       });
     }
   });

https://jsfiddle.net/gkjhygoa/

无法读取未定义的值 'visibility' - J

Cannot read value 'visibility' of undefined - J

javascript

jquery

visibility