Question

我发现Simon Tabor这个漂亮的插件创建了易于设置的切换按钮（jQuery Toggles）。

这很华丽，但遗憾的是我是Javascript和jQuery的新手，我不能让它作为切换按钮显示/隐藏＆lt; div＆gt;位于我的代码中的其他地方。

所以，问题是：

<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>

我想创建一个脚本，以便以恐怖的方式改变

的可见性

<div id="italian-text">

当切换按钮设置为

时，

仅

class="toggle-on italian active"

和

<div id="english-text">

当切换按钮设置为

时，

仅

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）的信息，您只需知道何时单击该按钮。

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

1 个答案: