jQuery -隐藏/显示不显示div并显示错误

Question

我想知道是否有人能帮我写一些jquery。

我对jQuery很陌生，所以这是一个很简单的问题。

我有一个div，它的id是“约-box”

当一个菜单项被按下时，我希望它能在视图中滑动。

我有下面的jQuery。

<script type="text/javascript">
    $(document).ready(function() {
        $('#menu-item-1 a').click(function() {
            if($('#about-box:visible').length)
                $('#about-box').hide("slide", { direction: "left" }, 1000);
            else
                $('#about-box').show("slide", { direction: "left" }, 1000); 
        });
    });
</script>

但是，我收到以下错误消息：

Uncaught TypeError: undefined is not a function

任何帮助，使这一工作将是非常感谢。

Answer 1

我认为问题在于您的页面中没有包含jQuery，您使用的显示/隐藏实现需要jQuery用户界面。

​

$(document).ready(function() {
  $('#menu-item-1 a').click(function() {
    if ($('#about-box').stop(true, true).is(':visible')) {
      $('#about-box').hide("slide", {
        direction: "left"
      }, 1000);
    } else {
      $('#about-box').show("slide", {
        direction: "left"
      }, 1000);
    }
  });
});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<div id="menu-item-1"><a>menu-item-1 a</a></div>
<div id="about-box">about-box</div>

​

您也可以使用jQueryUI开关

​

$(document).ready(function() {
  $('#menu-item-1 a').click(function() {
    $('#about-box').toggle("slide", {
      direction: "left"
    }, 1000);
  });
});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<div id="menu-item-1"><a>menu-item-1 a</a></div>
<div id="about-box">about-box</div>

​

Answer 2

由于文档是一个很好的元素，所以未定义的元素没有就绪:可见的看起来很好，请参见这里的http://api.jquery.com/visible-selector/

因此，未定义的必须在这里$(‘#menu-item-1a’).click或在您的页面或执行就绪的其他代码。

尽量找出地点。移除如果其他。未定义的抛出？？如果是，$(‘#菜单项-1a’)不会解析。

希望能帮上忙

Answer 3

尝试将选择器更改为

$('#about-box').is(':visible')