JQuery Slide 事件和 Div 高度未按预期变化

发布于 2024-08-11 09:14:13 字数 780 浏览 5 评论 0原文

我正在使用 JQuery，并且尝试在子 div 滑入和滑出时更改 div 框的 html。我的问题是下面的代码没有更改 #menu_text 的 html 值。它仅显示隐藏菜单，并且不检测通过 SlideToggle 更改的真实高度。

 $('#menu').click(function () {
  $('#menu_links').slideToggle('slow', function(){

   console.log('Debug : %s', $('#menu_links').height());

   if ($('#menu_links').height() == 1)
    $('#menu_text').html("Show Menu");
   else if ($('#menu_links').height() == 20)
    $('#menu_text').html("Hide Menu");

  });
 });

在 Firebug 控制台中检查后，高度的值永远不会从 20 改变，除非您多次快速单击 div 然后它将更改为 1。（我应该补充一下，样式表中定义的高度是 20）

文档说 SlideToggle只影响物体的高度。我错过了什么吗？谢谢你的帮助。

    <div id="menu"><p id="menu_text">Show Menu</p>
     <div id="menu_links">
            Stuff
   </div>
 </div>

原文

I am working with JQuery and I'm trying to change the html of a div box when the child div slides in and out. My problem is that the code below isn't changing the html value of #menu_text. It only displays Hide Menu and is not detecting the real height as changed by slideToggle.

 $('#menu').click(function () {
  $('#menu_links').slideToggle('slow', function(){

   console.log('Debug : %s', $('#menu_links').height());

   if ($('#menu_links').height() == 1)
    $('#menu_text').html("Show Menu");
   else if ($('#menu_links').height() == 20)
    $('#menu_text').html("Hide Menu");

  });
 });

Upon inspection in firebug console, The value of height never changes from 20 unless you click the div really fast multiple times then it will change to 1. (I should add that the height defined in the style sheet is 20)

The doc says that slideToggle only affects the height of the object. Am I missing something? Thank you for the help.

    <div id="menu"><p id="menu_text">Show Menu</p>
     <div id="menu_links">
            Stuff
   </div>
 </div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酒儿 2024-08-18 09:14:13

尝试：

$('#menu').click(function(){
    $('#menu_links').slideToggle('slow', function(){
        $('#menu_text').html($('#menu_links:visible').length ? "Hide menu" : "Show menu");
    });
});

在那里，您将根据链接元素是否可见来设置菜单文本。您可能最好不要依赖元素的高度和宽度，因为在最坏的情况下，它们可能会因浏览器而异（在这种情况下，它们也会根据 links 元素的内容而变化）。

Try:

$('#menu').click(function(){
    $('#menu_links').slideToggle('slow', function(){
        $('#menu_text').html($('#menu_links:visible').length ? "Hide menu" : "Show menu");
    });
});

There you'll set the text of the menu depending on if the links element is visible or not. You're probably better off not depending on element's heights and widths, as in the worst case they might vary from browser to browser (and in this case, they'll also change according to the content of the links element).

回复收藏 0 原文

沒落の蓅哖 2024-08-18 09:14:13

您还可以使用 data() 来保存状态。这是保存状态或任何东西的好技巧

$('#menu').click(function () {
  $('#menu_links').slideToggle('slow', function(){

   var $this = $(this);
   var toggled = $this.data('toggled');
   if (toggled)
    $('#menu_text').html("Show Menu");
   else 
    $('#menu_text').html("Hide Menu");
   $this.data('toggled', !toggled)

  });
 });

You could also use data() to save your state. It's a great trick to save state or anything

$('#menu').click(function () {
  $('#menu_links').slideToggle('slow', function(){

   var $this = $(this);
   var toggled = $this.data('toggled');
   if (toggled)
    $('#menu_text').html("Show Menu");
   else 
    $('#menu_text').html("Hide Menu");
   $this.data('toggled', !toggled)

  });
 });

回复收藏 0 原文

~没有更多了~