我想用我的下拉菜单完成以下操作。

1 - 点击后显示

2 - 第二次点击隐藏它

3 - 单击它外面的任何地方时隐藏它。

4 - 用幻灯片效果做这一切

我已经覆盖了 1-3 个。我在 4 上被阻止了。

我将如何创建幻灯片效果以及以下发生的点击事件？

我已经使用 jQuery 的 slideToggle（此处未显示）进行了概念验证……但是，我想学习如何以react方式进行操作。

如果您想查看完整的代码： react 下拉导航栏

// CASE 1 Show Hide on click, no slide effect yet  
class ServicesDropdown extends Component {
    constructor() {
        super();
        this.state = {
            dropdown: false
        };
    }

    handleClick = () => {
        if (!this.state.dropdown) {
            // attach/remove event handler
            document.addEventListener('click', this.handleOutsideClick, false);
        } else {
            document.removeEventListener('click', this.handleOutsideClick, false);
        }

        this.setState(prevState => ({
            dropdown: !prevState.dropdown,
        }));
    }

    handleOutsideClick = (e) => {
        // ignore clicks on the component itself
        if (this.node.contains(e.target)) {
            return;
        }
        this.handleClick();
    }

    render() {
        return (
            <li ref={node => { this.node = node; }}>
                <a href="#!" onClick={this.handleClick}>Services +</a>
                {this.state.dropdown && 
                (
                    <ul className="nav-dropdown" ref={node => { this.node = node; }}>
                    <li><a href="#!">Web Design</a></li>
                    <li><a href="#!">Web Development</a></li>
                    <li><a href="#!">Graphic Design</a></li>
                    </ul>

                )}
            </li>
        )
    }
}