jQuery在单击时在兄弟节点上设置高度 [英] jQuery set height on a sibling when clicked

问题描述

以前我问了

解决方案

代码的逻辑有一些问题，一些修改。

  $（function navCollapse（）{
 
 var slidedownToggle = $（'＃global -nav .slidedown-toggle'）; 
 
 slidedownToggle.click（function（）{
 //获取容器项
 var $ slidedown = $（this）.parents '.slidedown'）; 
 
 //获取需要向上/向下滑动的ul 
 var $ subnav = $（this）.siblings（'。nav-sub'）; 
 
 //计算显示所有LI所需的高度（以px为单位）
 var totalHeight = 0; 
 $ subnav.find（'li'）。 
 totalHeight + = $（this）.height（）; 
}）; 
 
 //设置合适的高度
 if（$ slidedown.hasClass '））{
 $ subnav.css（{height：'0px'}）; 
} else {
 $ subnav.css（{height：totalHeight +'px'}）; 
} 
 $ slidedown.toggleClass（'open'）; 
 
}）; 
 
}）; 
 

然后在你的CSS中确保你应用过渡到你的 .nav- sub ：

  -webkit- transition：height 0.2s linear; 
 -moz-transition：height 0.2s linear; 
 -ms-transition：height 0.2s linear; 
 -o-transition：height 0.2s linear; 
 transition：height 0.2s linear; 
  

工作范例：

http://jsbin.com/INIwuTA/11/

Earlier I asked this question about setting a height back to 0 after toggling a class.

Whilst the answer was correct, it turned out my question was not so I'm back to rephrase and try and solve my problem.

• I have a navigation list and some items have a sub navigation list inside them
• Each item that has a sub navigation has a toggle arrow which you click
• I want the sub navigation <ul> to start with a height of 0, and when you click the toggle arrow I want to use jQuery to set that sub navigation's height to the calculated height of it's items

The HTML is like this:

<li class="slidedown">
  <a href="#">Parent Link</a>
  <!-- Dropdown arrow -->
  <span class="slidedown-toggle">
    <span class="caret"></span>
  </span>
  <!-- Submenu -->
  <ul class="nav nav-sub">
    <li>
      <a href="#">Child Menu Item 1</a>
    </li>
  </ul>
</li>

The answer to my previous question gave me this script:

$(function navCollapse() {

  var slidedownToggle = $('#global-nav .slidedown-toggle');

  slidedownToggle.click(function () {
    var slidedown = $(this).parent('.slidedown');
    var $li = $(this).closest('li');
    var subnav = $(this).siblings('.nav-sub');
    var subnavHeight = subnav.height();

    slidedown.toggleClass('open');

    if ($li.hasClass('open')) {
        subnav.height(0);
    } else {
        subnav.height(subnavHeight);
    }

  });

});

BUT I quickly realised that once the height had been set to 0, the script would continue to calculate it as 0 from then on, no matter how many times you click. Which leaves me stuck and confused.

The old Bootstrap Collapse is pretty much what I want (only the height change). It sets the height via JavaScript and then uses CSS to do the transition. Although I'd prefer not to have my sub-menu have display: none.

Any ideas?

NOTE: I don't want to use JavaScript animations. I want to use CSS for that. I also don't want to use the max-height solution to CSS only dropdowns. That is my fallback.

DEMO

解决方案

There are a few problems with the logic of your code, so I've made some modifications.

$(function navCollapse() {

    var slidedownToggle = $('#global-nav .slidedown-toggle');

    slidedownToggle.click(function () {
        // Get the container item
        var $slidedown = $(this).parents('.slidedown');

        // Get the ul that needs to slide up/down
        var $subnav = $(this).siblings('.nav-sub');

        // Calculate the height required (in px) to show all LIs
        var totalHeight = 0;
        $subnav.find('li').each(function() {
            totalHeight += $(this).height();
        });

        // Set the appropriate height
        if ($slidedown.hasClass('open')) {
            $subnav.css({height: '0px'});
        } else {
            $subnav.css({height: totalHeight + 'px'});
        }
        $slidedown.toggleClass('open');

    });

});

Then in your CSS make sure you apply the transition to your .nav-sub:

-webkit-transition: height 0.2s linear;
-moz-transition: height 0.2s linear;
-ms-transition: height 0.2s linear;
-o-transition: height 0.2s linear;
transition: height 0.2s linear;

Working example:

http://jsbin.com/INIwuTA/11/

这篇关于jQuery在单击时在兄弟节点上设置高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！