如何打开一个,然后打开另一个。而且,当您单击另一个区域时,它们已关闭。
反应下拉代码:
<div className="header__nav">
<div className={classnames('header__nav__title', { 'is-active' : this.props.navAuthors })} onClick={this.props.toggleNavAuthors}><FormattedMessage {...messages.authors} /></div>
<ReactCSSTransitionGroup transitionName='header-menu-animation' transitionEnterTimeout={350} transitionLeave={false}>
{this.props.navAuthors ? this._renderAuthors() : null}
</ReactCSSTransitionGroup>
</div>
<div className="header__nav">
<div className={classnames('header__nav__title', { 'is-active' : this.props.nav })} onClick={this.props.toggleNav}><FormattedMessage {...messages.typefaces} /></div>
<ReactCSSTransitionGroup transitionName='header-menu-animation' transitionEnterTimeout={350} transitionLeave={false}>
{this.props.nav ? this._renderTypefaces() : null}
</ReactCSSTransitionGroup>
</div>
Run Code Online (Sandbox Code Playgroud)
在redux下拉代码上:
import {
SHOW_NAV,
HIDE_NAV
} from '../constants/ActionTypes'
export function toggleNav() {
return (dispatch, getState) => {
const { nav } = getState()
dispatch({
type: nav ? HIDE_NAV : SHOW_NAV
})
} …Run Code Online (Sandbox Code Playgroud)