Question

我正在制作一个反应菜单，但我想制作像google这样的菜单here you can see this。现在我正在制作MenuItem，这里的MenuItem可以嵌套在MenuItem中。

我创造了这样的东西并且它正在工作但是我想要动画菜单，我的意思是当你将鼠标悬停在它上面时，子菜单会显示出来。我无法达到这一目标。我认为它更多的是CSS。

这是我的代码：

var MenuItem = React.createClass({

  getInitialState() {
      return {
          height: null
      };
  },

  componentDidMount() {
    this.size = this.refs.main.getBoundingClientRect();
    this.setState({
      height: this.size.height,
    });
  },

  extend(obj, src) {
      Object.keys(src).forEach(function(key) { obj[key] = src[key]; });
      return obj;
  },

  render(){
    var _props = this.props,
        checked,
        size,
        style = {},
        leftIcon,
        innerDivStyle = {
          padding: "10px"
        },
        rightIcon,
        MenuItemClass = "MenuItem",
        rippleOpacity,
        rippleStyle = {
          color: "rgba(0,0,0,0.5)",
        },
        innerDivStyleMy= {
          lineHeight: this.state.height + "px",
          fontSize: _props.fontSize,
        };

    if (_props.checked) {
      checked = <FontIcon size={_props.fontSize} className="done" />;
    }

    if (_props.insetChildren) {
      checked = <FontIcon size={_props.fontSize} className="done" style={{opacity: 0}} />;
    }

    if (_props.leftIcon) {
      leftIcon = <FontIcon size={_props.fontSize} className={_props.leftIcon} />;
    }

    if (_props.rightIcon) {
      rightIcon = <FontIcon size={_props.fontSize} className={_props.rightIcon} />;
    }

    if (_props.disabled) {
      MenuItemClass = "MenuItem disabledMenuItem";
      rippleStyle.opacity = 0;
    }

    if (_props.innerDivStyle) {
      innerDivStyle = _props.innerDivStyle;
    }

    if (_props.style) {
      style = _props.style;
    }

    var innerStyle = this.extend(innerDivStyleMy, innerDivStyle);

    return(
      <div style={style}>
        <div ref="main" className={MenuItemClass} onTouchStart={_props.onTouchTap} style={innerStyle} value={_props.value} >
          <div className="MenuItemleft">{checked}{leftIcon}{_props.primaryText}</div>
          <div className="MenuItemRight">{_props.secondaryText}{rightIcon}</div>
          <Ink background={true} style={rippleStyle} opacity={rippleOpacity} />
          {_props.children}
        </div>
        <div style={{clear: "both"}}></div>
        {_props.menuItems}
      </div>
        );
  }
});

var MenuItems = React.createClass({
  render(){
    return(
      <div className="MenuItems">
        {this.props.children}
      </div>
    );
  }
});

ReactDOM.render(
 <MenuItem primaryText="tak" secondaryText="nie" checked="true" disabled="" insetChildren="" leftIcon="face"
 rightIcon="face" onTouchTap={()=>{alert("bbbbb");}} value="tak" innerDivStyle="" style="" fontSize={30} insetChildren=""
 menuItems={
   <MenuItems>
    <MenuItem primaryText="tak" secondaryText="nie" checked="true" leftIcon="" rightIcon="face" insetChildren="true" fontSize={20}/>
    <MenuItem primaryText="tak" secondaryText="nie" checked="true" leftIcon="" rightIcon="face" insetChildren="" fontSize={20}/>
   </MenuItems>} />,
 document.getElementById('app')
);

export default MenuItem;

所以基本上我想用MenuItem class将鼠标悬停在MenuItem组件上时显示子菜单所以我创建了一个组件SubMenuitem，它与MenuItem相同但它有不同的类名。

以下是代码：

var MenuItem = React.createClass({

  getInitialState() {
      return {
          height: null
      };
  },

  componentDidMount() {
    this.size = this.refs.main.getBoundingClientRect();
    this.setState({
      height: this.size.height,
    });
  },

  extend(obj, src) {
      Object.keys(src).forEach(function(key) { obj[key] = src[key]; });
      return obj;
  },

  render(){
    var _props = this.props,
        checked,
        size,
        style = {},
        leftIcon,
        innerDivStyle = {
          padding: "10px"
        },
        rightIcon,
        MenuItemClass = "MenuItem",
        rippleOpacity,
        rippleStyle = {
          color: "rgba(0,0,0,0.5)",
        },
        innerDivStyleMy= {
          lineHeight: this.state.height + "px",
          fontSize: _props.fontSize,
        };

    if (_props.checked) {
      checked = <FontIcon size={_props.fontSize} className="done" />;
    }

    if (_props.insetChildren) {
      checked = <FontIcon size={_props.fontSize} className="done" style={{opacity: 0}} />;
    }

    if (_props.leftIcon) {
      leftIcon = <FontIcon size={_props.fontSize} className={_props.leftIcon} />;
    }

    if (_props.rightIcon) {
      rightIcon = <FontIcon size={_props.fontSize} className={_props.rightIcon} />;
    }

    if (_props.disabled) {
      MenuItemClass = "MenuItem disabledMenuItem";
      rippleStyle.opacity = 0;
    }

    if (_props.innerDivStyle) {
      innerDivStyle = _props.innerDivStyle;
    }

    if (_props.style) {
      style = _props.style;
    }

    var innerStyle = this.extend(innerDivStyleMy, innerDivStyle);

    return(
      <div style={style}>
        <div ref="main" className={MenuItemClass} onTouchStart={_props.onTouchTap} style={innerStyle} value={_props.value} >
          <div className="MenuItemleft">{checked}{leftIcon}{_props.primaryText}</div>
          <div className="MenuItemRight">{_props.secondaryText}{rightIcon}</div>
          <Ink background={true} style={rippleStyle} opacity={rippleOpacity} />
          {_props.children}
        </div>
        <div style={{clear: "both"}}></div>
        {_props.menuItems}
      </div>
        );
  }
});

var SubMenuItem = React.createClass({

  getInitialState() {
      return {
          height: null
      };
  },

  componentDidMount() {
    this.size = this.refs.main.getBoundingClientRect();
    this.setState({
      height: this.size.height,
    });
  },

  extend(obj, src) {
      Object.keys(src).forEach(function(key) { obj[key] = src[key]; });
      return obj;
  },

  render(){
    var _props = this.props,
        checked,
        size,
        style = {},
        leftIcon,
        innerDivStyle = {
          padding: "10px"
        },
        rightIcon,
        SubMenuItemClass = "SubMenuItem",
        rippleOpacity,
        rippleStyle = {
          color: "rgba(0,0,0,0.5)",
        },
        innerDivStyleMy= {
          lineHeight: this.state.height + "px",
          fontSize: _props.fontSize,
        };

    if (_props.checked) {
      checked = <FontIcon size={_props.fontSize} className="done" />;
    }

    if (_props.insetChildren) {
      checked = <FontIcon size={_props.fontSize} className="done" style={{opacity: 0}} />;
    }

    if (_props.leftIcon) {
      leftIcon = <FontIcon size={_props.fontSize} className={_props.leftIcon} />;
    }

    if (_props.rightIcon) {
      rightIcon = <FontIcon size={_props.fontSize} className={_props.rightIcon} />;
    }

    if (_props.disabled) {
      MenuItemClass = "SubMenuItem disabledSubMenuItem";
      rippleStyle.opacity = 0;
    }

    if (_props.innerDivStyle) {
      innerDivStyle = _props.innerDivStyle;
    }

    if (_props.style) {
      style = _props.style;
    }

    var innerStyle = this.extend(innerDivStyleMy, innerDivStyle);

    return(
      <div style={style} className="tak">
        <div ref="main" className={SubMenuItemClass} onTouchStart={_props.onTouchTap} style={innerStyle} value={_props.value} >
          <div className="MenuItemleft">{checked}{leftIcon}{_props.primaryText}</div>
          <div className="MenuItemRight">{_props.secondaryText}{rightIcon}</div>
          <Ink background={true} style={rippleStyle} opacity={rippleOpacity} />
          {_props.children}
        </div>
        <div style={{clear: "both"}}></div>
        {_props.menuItems}
      </div>
        );
  }
});

var MenuItems = React.createClass({
  render(){
    return(
      <div className="MenuItems">
        {this.props.children}
      </div>
        );
  }
});

ReactDOM.render(
 <MenuItem primaryText="tak" secondaryText="nie" checked="true" disabled="" insetChildren="" leftIcon="face"
 rightIcon="face" onTouchTap={()=>{alert("bbbbb");}} value="tak" innerDivStyle="" style="" fontSize={30} insetChildren=""
 menuItems={
   <MenuItems>
    <SubMenuItem primaryText="tak" secondaryText="nie" checked="true" leftIcon="" rightIcon="face" insetChildren="true" fontSize={20}/>
    <SubMenuItem primaryText="tak" secondaryText="nie" checked="true" leftIcon="" rightIcon="face" insetChildren="" fontSize={20}/>
   </MenuItems>} />,
 document.getElementById('app')
);

export default MenuItem;

现在我想做这样的事情：

.MenuItem:hover + .MenuItems > .SubMenuItem{
  /*the content*/
}

但它没有用，没有任何事情发生。感谢您的帮助：）

修改

我的HTML看起来如何：

所以我不明白为什么我上面展示的CSS不起作用。我认为仅使用CSS进行操作是一种更快捷，更好的方式。

反应js和css动画

0 个答案: