Question

我想知道是否有人可以帮助我尝试写一些jquery。

我对jQuery很新，所以这很容易。

我有一个id为＆＃39; about-box＆＃39;

的div

我想让它在按下菜单项时滑入和滑出视口。

我有以下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-UI，你使用的show / hide实现需要jQuery UI

＆＃13;

$(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);
    }
  });
});

＆＃13;

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

＆＃13;

您也可以使用jQueryUI toggle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

因为文件肯定是一个好的元素，undefined不是准备好的：可见看起来很好看http://api.jquery.com/visible-selector/

所以未定义必须在这里$（＆＃39;＃menu-item-1 a＆＃39;）。点击或在页面中的其他代码或执行就绪。

尝试找到哪里。删除if else。不确定的扔？如果是，$（＆＃39;＃menu-item-1 a＆＃39;）无法解决。

希望有所帮助

Answer 3

尝试将选择器更改为

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

Answer 4

$('#about-box:visible')是一个错误的选择器，我认为你可以在关于框的按钮上切换一个类并决定是否进入幻灯片

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

4 个答案: