Question

所以我试图让我的切换按钮工作，但我遇到了一个恼人的问题。首先，我找到了一个使用bootstrap的解决方案，但我使用的网站框架并不支持bootstrap，所以就是这样。

目前我有这个

＆＃13;

    <!DOCTYPE html>
    <html>
    <head>
    <title>Example</title>
    
    <!-- CSS -->
    <style>
    .myTable { 
      width: 100%;
      text-align: left;
      background-color: lemonchiffon;
      border-collapse: collapse; 
      }
    .myTable th { 
      background-color: #FFD300;
      color: white; 
      }
    .myTable td,
    .myTable th { 
      padding: 10px;
      border: 1px solid goldenrod; 
      }
    .button {
      
    border:1px solid #d7dada; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;color: #000000;
     background-color: #f4f5f5; background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f5f5), to(#dfdddd));
     background-image: -webkit-linear-gradient(top, #f4f5f5, #dfdddd);
     background-image: -moz-linear-gradient(top, #f4f5f5, #dfdddd);
     background-image: -ms-linear-gradient(top, #f4f5f5, #dfdddd);
     background-image: -o-linear-gradient(top, #f4f5f5, #dfdddd);
     background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f4f5f5, endColorstr=#dfdddd);
    
    }
    </style>
    
    </head>
    <body>
    
    <!-- HTML -->
    <table class="myTable">
    	<tr>
    <th>Assignment</th>
    <th>Points</th>
    <th>Assignment</th>
    <th>Points</th>
    </tr>
    <tr>
    <td>Some text
    <button class = "button">Read more</button>
    
    <p style="display: none" align = "justify">Some Explanation
    </p>
    
    <td> 5</td> 
    
    <td>Some other text
    <button class = "button">Read more</button>
    
    <p style="display: none" align = "justify">Other Explanation
    </p>
    
    <td> 5</td> 
    </tr>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").toggle();
        });
    });
    </script>
    
    </table>
    </body>
    </html>

＆＃13;

但是，点击它时我不希望两个按钮都展开。我需要他们分开扩展！

Answer 1

使用$(this).next(SELECTOR)选择匹配selector
的同一级别的下一个元素

$(document).ready(function() {
  $("button").click(function() {
    $(this).next("p").toggle();
  });
});

.myTable {
  width: 100%;
  text-align: left;
  background-color: lemonchiffon;
  border-collapse: collapse;
}
.myTable th {
  background-color: #FFD300;
  color: white;
}
.myTable td,
.myTable th {
  padding: 10px;
  border: 1px solid goldenrod;
  vertical-align: top;
}
.button {
  border: 1px solid #d7dada;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-size: 12px;
  font-family: arial, helvetica, sans-serif;
  padding: 10px 10px 10px 10px;
  text-decoration: none;
  display: inline-block;
  color: #000000;
  background-color: #f4f5f5;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f5f5), to(#dfdddd));
  background-image: -webkit-linear-gradient(top, #f4f5f5, #dfdddd);
  background-image: -moz-linear-gradient(top, #f4f5f5, #dfdddd);
  background-image: -ms-linear-gradient(top, #f4f5f5, #dfdddd);
  background-image: -o-linear-gradient(top, #f4f5f5, #dfdddd);
  background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
  filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f4f5f5, endColorstr=#dfdddd);
}
</s

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="myTable">
  <tr>
    <th>Assignment</th>
    <th>Points</th>
    <th>Assignment</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Some text
      <button class="button">Read more</button>

      <p style="display: none" align="justify">Some Explanation
      </p>

      <td>5</td>

      <td>Some other text
        <button class="button">Read more</button>

        <p style="display: none" align="justify">Other Explanation
        </p>

        <td>5</td>
  </tr>

</table>

多个切换按钮html

1 个答案: