Jquery .toggle替换代码 [英] Jquery .toggle replacement code

问题描述

我的网站上有一个按钮，可以在文章的宽窄布局之间切换。从JQuery 1.9开始，由于toggle的弃用，这种方法没有用。我不是JS的好主意，并没有设法在这里拼凑出各种问题的答案，所以如果可能的话，希望有人看看我的具体案例。我很感激，对于一个更有能力的人来说，这可能非常明显，但我还在学习！

I have (had) a button on my website that switched between a wide and narrow layout for articles. Since JQuery 1.9, this hasn't worked because of the deprecation of toggle. I'm no great whizz at JS, and haven't managed to cobble together an answer from the various questions on here, so would like someone to look at my specific case if possible. I appreciate that for someone more competent this is probably very obvious, but I'm still learning!

该网站就在这里，例如：

The site is here, e.g:

http://www.davidsmith.name/2011/09/04/Real-surreal-and-hyperreal-in-crash-and-the-beach/

代码的适用部分如下：

<span><a id="switch" href="#" title="switch the menu"><span id="blogview">Switch to Article View</span>
 <span id="articleview" class="hide">Switch to Blog View</span></a></span><br/>
 <span id="readability" class="hide"><span class="rdbWrapper" data-show-read="1" data-show-send-to-kindle="1" data-show-print="1" data-show-email="0" data-orientation="0" data-version="1" data-bg-color="transparent"></span><script type="text/javascript">(function() {var s = document.getElementsByTagName("script")[0],rdb = document.createElement("script"); rdb.type = "text/javascript"; rdb.async = true; rdb.src = document.location.protocol + "//www.readability.com/embed.js"; s.parentNode.insertBefore(rdb, s); })();</script></span>

<script type="text/javascript">
            $('a#switch').(function () {
            $('div#right').hide('slide', { direction: 'right' }, 300);
            $('div#left').delay(300).animate({width: 950}, 600);
            $('span#blogview').toggleClass('hide');
            $('span#articleview').toggleClass('hide');
            $('span#readability').toggleClass('hide');
            }, function () {
            $('div#right').delay(500).show('slide', { direction: 'right' }, 500);
            $('div#left').animate({width: 430}, 500);
            $('span#blogview').toggleClass('hide');
            $('span#articleview').toggleClass('hide');
            $('span#readability').toggleClass('hide');}
            );
</script><br />     

推荐答案

查看我的回答其他

这将转化为

$(function() {                      
   $('a#switch').on("click",function(e) {
      e.preventDefault();
      if ($(this).data("show")=="no") {
            $('div#right').hide('slide', { direction: 'right' }, 300);
            $('div#left').delay(300).animate({width: 950}, 600);
            $('span#blogview').toggleClass('hide');
            $('span#articleview').toggleClass('hide');
            $('span#readability').toggleClass('hide');
        $(this).data("show","yes");
      }   
      else {
            $('div#right').delay(500).show('slide', { direction: 'right' }, 500);
            $('div#left').animate({width: 430}, 500);
            $('span#blogview').toggleClass('hide');
            $('span#articleview').toggleClass('hide');
            $('span#readability').toggleClass('hide');
        $(this).data("show","no");     
      }
  });
});

这篇关于Jquery .toggle替换代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！