Question

我想知道如何获得目标的父母同胞。

我想要当单击button.btn时toggleSlide tr.show-hide。

我可以使用ID逐一进行。但是我想知道如何为每个按钮仅编写一个功能，以防万一我需要20或30多个按钮。

<table>
  <tr class="toggle">
    <td> <button class="btn">toggle1</button> </td>
  </tr>

  <tr class="show-hide">
    <td>-----1111------</td>
  </tr>

  <tr class="toggle">
    <td> <button class="btn">toggle2</button> </td>
  </tr>

  <tr class="show-hide">
    <td>-----2222------</td>
  </tr>

</table>

<table class="table1">
  <tr class="table1__row">
    <th>table 1 - th1 </th>
    <td>table 1 - td </td>
  </tr>

  <tr class="table1__row">
    <th>table 1 - th2 </th>
    <td>

      <table class="table2">
        <tr class="table2__row toggle">
        <th> table 2 - th1</th>
          <td> <button class="btn">toggle1</button></td>
        </tr>

        <tr class="show-hide">
          <th></th>
          <td>-----1111------</td>
        </tr>

        <tr class="table2__row toggle">
          <th> table 2 - th2 </th>
          <td> <button class="btn">toggle2</button> </td>
        </tr>

        <tr class="show-hide">
          <th></th>
          <td>-----2222------</td>
        </tr>

      </table>

    </td>
  </tr>
</table>

Answer 1

如果有多行，则

nextUntil（）是您要查找的内容。或者，如果仅要一行，则只需要next（）。

$("table").on("click", ".toggle", function() {
  $(this).nextUntil(".toggle").toggleClass("active")
})

.show-hide {
  display: none;
}

.show-hide.active {
  display: table-row;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="toggle">
    <td> <button class="btn">toggle1</button> </td>
  </tr>

  <tr class="show-hide">
    <td>-----1111------</td>
  </tr>

  <tr class="toggle">
    <td> <button class="btn">toggle2</button> </td>
  </tr>

  <tr class="show-hide">
    <td>-----2222------</td>
  </tr>

  <tr class="toggle">
    <td> <button class="btn">toggle3</button> </td>
  </tr>

  <tr class="show-hide">
    <td>-----3a------</td>
  </tr>
  <tr class="show-hide">
    <td>-----3b------</td>
  </tr>

  <tr class="toggle">
    <td> <button class="btn">toggle4</button> </td>
  </tr>

  <tr class="show-hide">
    <td>-----4------</td>
  </tr>

</table>

Answer 2

这里是fiddle with your code（2个表格中的按钮）

我更改了jQuery代码，以在单击实际切换器本身时侦听单击事件。

接下来，您在小提琴中缺少显示/隐藏样式：

this.state = { fontLoaded: false, feed: [{ username: ["Jeff", "Kyle", "David"], caption: ["Great", "Amazing", "Not so Good"], comments: ["Comment 1", "Comment 2", "No Comment"], photo:[Pic1,Pic2,Pic3], }] } state = { isModalVisible: false, }; toggleModal = () => { this.setState({ isModalVisible: !this.state.isModalVisible }); }; renderFeed = () => { return this.state.feed.map((card, index) => { return card.username.map((username, i) => { if(card.caption[i]) return ( <View> <TouchableHighlight onPress={this.toggleModal} underlayColor="white"> <Card key={`${i}_${index}`} image={card.photo[i]} containerStyle={{borderRadius:10, marginRight:1, marginLeft:1,}}> <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }} > <View style={{ flexDirection: 'row'}}> <Avatar size="small" rounded source={card.photo[i]} /> </View> <View style={{flexDirection:'row'}}> <Avatar rounded icon={{ name:'heart-multiple-outline', type:'material-community', color: '#ff4284'}} overlayContainerStyle={{marginLeft:5}} reverse size='small'/> <Avatar reverse rounded icon={{ name:'comment-processing-outline', type:'material-community' }} overlayContainerStyle={{backgroundColor: '#dbdbdb',marginLeft:5}} size='small'/> </View> </View> { this.state.fontLoaded == true ? ( <View style={{flexDirection:'row'}}> <Text style={{fontFamily: 'MontserratB', color:'#bf00b9', marginTop:10}}>{username}</Text> <Text style={{fontFamily:'Montserrat', marginTop:10}}>{card.caption[i]}</Text> </View> ) : (<Text> Loading...</Text>) } <Text style={{marginTop:4, color:'#878787'}}>{card.comments[i]}</Text> </Card> </TouchableHighlight> <Modal animationIn="zoomInDown" animationOut="zoomOutDown" animationInTiming={700} animationOutTiming={600} backdropTransitionInTiming={600} backdropTransitionOutTiming={600} isVisible={this.state.isModalVisible}> <Image source={card.photo[i]} style={{width: SCREEN_WIDTH - 20, height: 300, justifyContent: 'center', alignSelf: 'center' }}/> <Card containerStyle={{ width: SCREEN_WIDTH - 20, marginTop: 0, justifyContent: 'center', alignSelf: 'center' }}> <View style={{ flexDirection:'row' }}> <Avatar size="small" rounded source={card.photo[i]} /> <View style={{ flex:2, flexDirection:'row', justifyContent:'flex-end' }}> <Avatar rounded icon={{ name:'heart-multiple-outline', type:'material-community'}} overlayContainerStyle={{backgroundColor: '#ff4284',marginLeft:5}} reverse size='small'/> <Avatar reverse rounded icon={{ name:'comment-processing-outline', type:'material-community' }} overlayContainerStyle={{backgroundColor: '#dbdbdb',marginLeft:5}} size='small'/> </View> </View> <View style={{ flexDirection:'row' }}> <Text style={{fontFamily: 'MontserratB', color:'#bf00b9', marginTop:10}}>{username}</Text> <Text style={{fontFamily:'Montserrat', marginTop:10}}>{card.caption[i]}</Text> </View> <Text style={{marginTop:4, color:'#878787'}}>{card.comments[i]}</Text> </Card> <Button style={{marginTop:0, borderBottomRightRadius: 20, borderBottomLeftRadius: 20, borderTopLeftRadius: 0, borderTopRightRadius: 0, width: SCREEN_WIDTH - 20, alignSelf: 'center', justifyContent: 'center'}} title="Close" onPress={this.toggleModal} /> </Modal> </View> ); return <React.Fragment />; }); }) }

.show-hide.active {
  display: table-row;;
}

$(".toggle").on("click", function() {
  $(this).nextUntil(".toggle").toggleClass("active")
})

table {
   border-collapse: collapse;
  border:1px solid #000;
}

th, td {
  padding : 1em;
}

.table1__row > th {
  background : lemonchiffon;
  border: 1px solid black;
}

.table1__row > td {
  background : #DDD;
  border: 1px solid black;
}

.table2__row > th {

}
.show-hide {
   display: none;
}

.show-hide.active {
  display: table-row;;
}

如何显示祖父母的同胞目标？

2 个答案: