javascript - 当使用 jQuery 切换隐藏 div 时，使用 jquery 添加/更改 CSS

Question

我有一个类为“hide-btn1”的 anchor 。单击它时，我希望发生以下情况:

1. rcol-content 隐藏(切换)并且文本从隐藏更改(切换)为显示
2. #container 宽度应增加到值“2038px”
3. table.status-table 宽度应该增加到“1669px”

为了实现这一切，到目前为止我已经想出了这段代码，但我不知道如何从这里前进:

$('.hide-btn1').on('click', function(e) {
     e.preventDefault();
     $(this).text(function(i,v) {
           return v === 'Show' ? 'Hide' : 'Show';
     });
});

编辑:按要求添加 HTML 代码:

<div id="container">
   <a class="hide-btn1">Hide</a>

   <div class="rcol-content">
        <p>This would be included in the right column</p>

   </div>
   <table class="status-table>
     <tr>
       <th>Heading</th>
     </tr>
     <tr>
        <td>Table Data</td>
     </tr>
   </table>

</div><!-- end container -->

Answer 1

我正在尝试根据您提供的内容提供一些东西。快速的方法是:

$('a.hide-btn1').click(function(){
    $('.rcol-content').toggle();
    $('#container').css('width','2038px');
    $('table.status-table').css('width','1669px');
});

但是，我建议只在样式表中的默认样式下方添加一个带有 css 的类。使用 JS 生成 css 不是一个好的做法。

$('a.hide-btn1').click(function(){
    $('.rcol-content').toggle();
    $('#container').addClass('newClassOne');
    $('table.status-table').addClass('newClassTwo');
});

希望这对您有所帮助。但是，就像其他评论所说的那样，您应该有一个 fiddle 或代码笔来更好地描述您想要的结果。祝你好运。

fiddle here