如何改变＆＃34; $（this）.children＆＃34;反应？

Question

这是我的HTML，我想在我使用nav 1或nav 2时显示子导航。

<ul id="menu">
    <li>
        <a href="#">nav 1</a>
        <ul>
            <li><a href="#">sub nav 1</a></li>
            <li><a href="#">sub nav 2</a></li>
            <li><a href="#">sub nav 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">nav 2</a>
        <ul>
            <li><a href="#">sub nav a</a></li>
            <li><a href="#">sub nav b</a></li>
            <li><a href="#">sub nav c</a></li>
        </ul>
    </li>
</ul>

我知道我可以在jquery上做到这一点

  $('#menu li').hover(function(){
    $(this).children('ul').css('display', 'block');
  } , function(){
    $(this).children('ul').css('display', 'none');
  });

但如何做出反应？

Answer 1

你没有。请避免在React中使用jQuery，因为这是一种不好的做法。

React就是可以轻松实现完全相同结果的组件：

class CollapsibleItem extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = {
      showContent: false,
    }
    
    this.toggleHover = this.toggleHover.bind(this)
  }
  
  toggleHover() {
    this.setState({
      showContent: !this.state.showContent,
    })
  }
  
  render() {
    const { showContent } = this.state
    
    return (
      <li
        onMouseOver={this.toggleHover}
        onMouseOut={this.toggleHover}
      >
        {this.props.name} 
        {showContent && this.props.children}
      </li>
    )
  }
}

const App = () => 
  <div>
    <ul>
      <CollapsibleItem name="Nav 1">
        <ul>
          <li>Sub nav 1</li>
          <li>Sub nav 2</li>
          <li>Sub nav 3</li>
        </ul>
      </CollapsibleItem>
      <CollapsibleItem name="Nav 2">
        <ul>
          <li>Sub nav 4</li>
          <li>Sub nav 5</li>
          <li>Sub nav 6</li>
        </ul>
      </CollapsibleItem>
    </ul>
  </div>

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Answer 2

当你可以使用两行CSS时，请避免使用jQuery甚至ReactJS;）

＆＃13;

＆＃13;

#menu ul { display: none; }
#menu li:hover ul { display: block; }

＆＃13;

<ul id="menu">
    <li>
        <a href="#">nav 1</a>
        <ul>
            <li><a href="#">sub nav 1</a></li>
            <li><a href="#">sub nav 2</a></li>
            <li><a href="#">sub nav 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">nav 2</a>
        <ul>
            <li><a href="#">sub nav a</a></li>
            <li><a href="#">sub nav b</a></li>
            <li><a href="#">sub nav c</a></li>
        </ul>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;