Question

我的分类菜单上有一些切换菜单动画。想法是当用户点击切换项目时，内容被按下，菜单出现。再次点击时，内容回到正常位置，菜单消失。

我认为我正是以正确的方式做到这一点，但是，如果我不使用属性display:none和display: block，则会有一些空白点（菜单所在的位置）。并且，过渡不起作用......

以下是问题的链接：http://alsite.com.br/festas/azul/categoria.asp

基本HTML：

<section id="menu_categorias">
<div class="category_bar">
    <div class="container">

        <div class="row">

            <div class="col-md-5">
                <div class="menu_categorias">
                    <a href="#menu" id="toggle"><span></span></a>

                </div>
            </div>

        </div>

    </div>
</div>

<div id="menu">
    <div class="container">
        <div class="col-md-3 col_menu">
            <ul>
                <li>
                    <a href="#">CATEGORIA TESTE</a>
                    <ul class="submenu">
                        <li><a href="">teste teste teste</a></li>
                        <li><a href="">teste teste teste</a></li>
                        <li><a href="">teste teste teste</a></li>
                        <li><a href="">teste teste teste</a></li>
                        <li><a href="">teste teste teste</a></li>
                    </ul>
                </li>
            </ul>
        </div>

    </div>
</div>

SCRIPT：

var theToggle = document.getElementById('toggle');

            // based on Todd Motto functions
            // http://toddmotto.com/labs/reusable-js/

            // hasClass
            function hasClass(elem, className) {
                return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
            }
            // addClass
            function addClass(elem, className) {
                if (!hasClass(elem, className)) {
                    elem.className += ' ' + className;
                }
            }
            // removeClass
            function removeClass(elem, className) {
                var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ') + ' ';
                if (hasClass(elem, className)) {
                    while (newClass.indexOf(' ' + className + ' ') >= 0 ) {
                        newClass = newClass.replace(' ' + className + ' ', ' ');
                    }
                    elem.className = newClass.replace(/^\s+|\s+$/g, '');
                }
            }
            // toggleClass
            function toggleClass(elem, className) {
                var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, " " ) + ' ';
                if (hasClass(elem, className)) {
                    while (newClass.indexOf(" " + className + " ") >= 0 ) {
                        newClass = newClass.replace( " " + className + " " , " " );
                    }
                    elem.className = newClass.replace(/^\s+|\s+$/g, '');
                } else {
                    elem.className += '' + className;
                }
            }

            theToggle.onclick = function() {
               toggleClass(this, 'on');
               if ($(this).hasClass('on')) {
                   $('#menu').css({
                        opacity: '1',
                        visibility: 'visible'
                   });

               } else {
                    $('#menu').css({
                        opacity: '0',
                        visibility: 'hidden'
                   });
               };
               return false;

            }

CSS：

    .category_bar {
    padding: 20px;
    padding-bottom: 10px;
    background-color: #274566;
}

.category_bar .menu_categorias span.cat{
    position: absolute;
    line-height: 43px;
    color: #ffffff;
    font-size: 25px;
    display: inline-block;
    margin-left: 10px;
    font-family: 'Roboto Condensed', sans-serif;
}

#menu {
    background-color: #274566;
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}

.col_menu {
    border-right: 1px solid #eeeeee;
}

#menu ul{
    list-style: none;
    color:#ffffff;
}

    #menu ul li{
        margin: 5px 0;
        padding: 0 10px;
        margin-bottom: 15px;
    }

        #menu ul li a{
            color: #ffeb3b;
            text-decoration: none;
        }

        #menu ul.submenu{
            padding-left: 10px;
        }

        #menu ul.submenu li{
            margin-bottom: 5px;
        }

        #menu ul.submenu a{
            color: #ffffff;
        }

#toggle {
  display: inline-block;
  width: 28px;
  height: 30px;
  margin: 18px auto 10px;
}

#toggle span:after,
#toggle span:before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
}
#toggle span:after{
  top: 9px;
}
#toggle span {
  position: relative;
  display: block;
}

#toggle span,
#toggle span:after,
#toggle span:before {
  width: 100%;
  height: 5px;
  background-color: #ffffff;
  transition: all 0.3s;
  backface-visibility: hidden;
  border-radius: 2px;
}

/* on activation */
#toggle.on span {
  background-color: transparent;
}
#toggle.on span:before {
  transform: rotate(45deg) translate(5px, 5px);
}
#toggle.on span:after {
  transform: rotate(-45deg) translate(7px, -8px);
}
#toggle.on + #menu {
  opacity: 1;
  visibility: visible;
}

Answer 1

这JSFiddle能做你想做的吗？

这可能不是最干净的方法，但我已将theToggle.onclick功能更改为

theToggle.onclick = function() {
    $('#menu').css({
        height: $("#menu").get(0).scrollHeight,
        opacity: 1,
        marginBottom: '15px',
        visibility: 'visible'
    });

    toggleClass(this, 'on');

    if (!$(this).hasClass('on')) {
        $('#menu').css({
            opacity: 0,
            marginBottom: 0,
            height: 0,
            visibility: 'hidden'
        });
    }

    return false;
}

只是将#menu上的填充调整为

padding: 15px 15px 0;

希望它会帮助你

用动画切换菜单

1 个答案: