jQuery Toggle：显示/隐藏位于页面其他位置的 <div>

Question

我发现 Simon Tabor 这个漂亮的插件可以创建易于设置样式的切换按钮 (jQuery Toggles)。

这太棒了，但不幸的是，我是 Javascript 和 jQuery 的新手，我无法将其用作显示/隐藏代码中其他位置的

的切换按钮。

那么，问题来了：

<div class="container">

  <div class="well well-lg">
   <div class="page-header">
    <h1>MY SITE <small>My site subtitle</small></h1>
   </div>
  </div>

   <div class="panel panel-info">
    <div class="panel-heading">

     <div style="width: 100px; margin-left: auto;">
      <div class="toggle-light">
       <div class="toggle on">
        <div class="toggle-slide active">
         <div class="toggle-inner" style="width: 165px; margin-left: 0px;">
          <div class="toggle-on italian active" style="height: 35px; width: 82.5px; text-align: center; text-indent: -17.5px; line-height: 35px;">ITA</div>
          <div class="toggle-blob" style="height: 35px; width: 35px; margin-left: -17.5px;"></div>
         <div class="toggle-off english" style="height: 35px; width: 82.5px; margin-left: -17.5px; text-align: center; text-indent: 17.5px; line-height: 35px;">ENG</div>
        </div>
       </div>
      </div>
     </div>
    </div>

<script type="text/javascript">$('.toggle').toggles({on:true, text:{on:'ITA',off:'EN'}});</script>
</div>
</div>

<div class="row">
   <div class="left-sidebar col-md-3" role="complementary">

     <ul class="hidden-xs hidden-sm nav nav-pills nav-stacked">
       <li class="active"><a style="cursor: default;" href="javascript: void(0);"><i class="icon-fixed-width icon-dark icon-reorder icon-large"></i><strong>MAIN MENU</strong></a></li>
       <li>...</li>
       <li>...</li>
       <li>...</li>
       <li>...</li>
     </ul>

   </div>

<div class="col-md-9">

  <div id="italian-text">
  <h1>Il mio titolo in italiano</h1>
  <p>Il mio paragrafo in italiano</p>
  </div>

  <div id="english-text">
  <h1>My English title</h1>
  <p>My English paragraph</p>
  </div>

</div>

</div>
</div>

我想创建一个脚本来动态地改变可见性

仅当切换按钮设置为

class="toggle-on italian active"

和



仅当切换按钮设置为

class="toggle-on English active"

我做了很多尝试，但总是失败：这令人沮丧！

感谢您的阅读和耐心。
    

        

    
    

        
【问题讨论】：

            

Answer 1

你可以使用

// Getting notified of changes, and the new state:
$('.toggle').on('toggle', function (e, active) {
    if (active) {
        foo();
    } else {
        bar();
    }
});

其中foo() 和bar() 是根据切换状态执行的两个函数，例如

$('#english-text').hide();
$('#italian-text').show();

对于“ITA”状态，并且

$('#italian-text').hide();
$('#english-text').show();

对于“EN”状态。

见toggle plugin documentation ;)

加载页面时不要忘记隐藏英文段落（使用$('#english-text').hide();或使用css：display:none）

这是一个工作演示： DEMO

希望对你有帮助！

编辑：顺便说一句，您可以使用：

$('#english-text').hide();
$('.toggle').on('toggle', function (e) {
       $('#english-text, #italian-text').toggle();
});

切换意大利语和英语段落。这要容易得多，但是您不会获得有关按钮状态（ITA 或 ENG）的信息，您只会知道单击按钮的时间。