Removing a CSS onClick

Question

我正在尝试使我的链接从左到右切换。我正在使用下面的代码;

.HTML：

$forum_threads = '
    <div id="latest_threads_link">
        <a href="javascript:void(0)" id="latest_threads_click"><img src="images/kalachi/latest_threads.png" alt="Latest Threads" title="Click Here to see latest threads of this section."></a>
        <table border="0" cellspacing="'.$theme['borderwidth'].'" cellpadding="'.$theme['tablespace'].'" class="tborder" style="display: none;" id="latest_threads_show">
            '.$forum_threads_bit.'
        </table>
    </div>
';

j查询：

jQuery(document).ready(function($){
  $('a[id^="latest_threads_click"]').on('click', function (e){
        e.preventDefault();
        $('#latest_threads_show').slideToggle();
        $('#latest_threads_click').addClass('latest_threads_link_active');
    });
});

.CSS：

#latest_threads_link{
    left:0;
    position:fixed;
    bottom:150px;
}
.latest_threads_link_active{
    left:200px;
    position:fixed;
    bottom:150px;
}

我想让它在单击#latest_threads_link然后#latest_threads_show从左到右切换，然后在第二次单击#latest_threads_link然后隐藏表格#latest_threads_show。

它实际上适用于我的代码，但问题是即使在第二次单击时，#latest_threads_link仍然保持在左侧200px。我希望#latest_threads_link在第二次点击时left: 0。

请帮忙！！

Answer 1

您的问题是每次点击都会添加类。相反，请更改此行：

$('#latest_threads_click').addClass('latest_threads_link_active');

对此：

$('#latest_threads_click').toggleClass('latest_threads_link_active');

Answer 2

使用 toggleClass ：

演示 ： http://jsfiddle.net/5Y9mG/6/

jQuery(document).ready(function($){
  $('a[id^="latest_threads_click"]').on('click', function (e){
        e.preventDefault();
        $('#latest_threads_show').slideToggle();
        $('#latest_threads_click').toggleClass('latest_threads_link_active');
    });
});

Answer 3

替换

$('#latest_threads_show').slideToggle();

跟

$('#latest_threads_show').slideToggle(400, function()
{
    if($(this).is(":hidden"))
    {
        $(this).css({'left':'0px;'});
    }else
    {
        $(this).css({'left':'200px;'});
    }
});

它将左侧从 0px 更改为 200px 并重复等（切换）。