标签: toggle

这是我的问题的快速和紧张:

$("a").toggle(function() { /*function A*/ }, function() { /*function B*/ });

在function A表单内显示.如果用户成功完成表单,则表单将再次隐藏(返回其原始状态).

里面function B相同的形式是隐藏的.

这背后的理论是用户可以选择显示表单并填写表单,或者他们可以再次单击并让表单重新隐藏.

现在我的问题是:目前,如果用户成功填写表单 - 并且它进入隐藏状态 - 用户必须先点击链接两次才能返回显示表单的切换状态.

无论如何以编程方式将切换开关重置为初始状态？

所以我对Javascript和Jquery很新.我想要创建的是一个双列页面,其中左列的链接将导致右侧的div从左向右水平滑动,并在再次单击时滑出视图.我知道我需要使用幻灯片切换效果,但我无法以每个链接导致不同的div滑动的方式实现它...我试图调整我通过谷歌搜索找到的几个jsfiddles但是谈到javascript,我很丢失.

到目前为止,这是我能够成功调整的唯一小提琴...... http://jsfiddle.net/bridget_kilgallon/HAQyK/
但是那些垂直滑动,并在点击时加载所有div.

这是我为没有任何javascript的页面布局创建的小提琴... http://jsfiddle.net/bridget_kilgallon/NhanG/

请帮忙!:) -Bridget

假设我们有一个int与希望之间切换它0,并1在布尔时尚.我想到了以下几种可能性:

int value = 0; // May as well be 1

value = value == 0 ? 1 : 0;
value = (value + 1) % 2;
value = !value; // I was curious if that would do...

1. 第三个似乎有效.为什么？是谁决定!0的1？
2. 这些都有问题吗？
3. 还有其他可能吗？例如按位运算符？
4. 哪个提供最佳性能？
5. 这些都是相同的_Bool(或bool来自stdbool.h)吗？如果没有,有什么区别？

编辑:很多有价值的信息很多很好的答案,谢谢!不幸的是,我只能接受一个.

我想显示和隐藏(切换)<table> onClick事件<a>.这是我的<a>标签

<a id="loginLink" onclick="toggleTable(true);" href="#">Login</a>

这是我的java脚本函数 toggleTable(hide)

   <script>
    function toggleTable(hide)
    {
    if (hide) {
       document.getElementById("loginTable").style.display="table";
       document.getElementById("loginLink").onclick = toggleTable(false);

    } else {
       document.getElementById("loginTable").style.display="none";
       document.getElementById("loginLink").onclick = toggleTable(true);
    }
   }
   </script>

这是我的<table>标签

<table id="loginTable" border="1" align="center" style="display:none">

第一次点击<a> link它显示我的表,但下次点击它时不会隐藏.我做错了什么.

我在doc中准备了一段jQuery,它可以切换包含以下内容的div textarea:

$('div#addnote-area').hide(); // hide the div
$('a#addnote-link').click(function() { // click event listener on link
     $('div#addnote-area').toggle(); // toggle the hidden div 
});

单击链接时切换工作正常.我遇到的问题是,如果div#addnote-area它低于浏览器的当前视口,它会在显示时保留在那里.我希望用户的光标转到textarea,并且整个textarea可以在窗口中查看.

点击此处查看图片http://i50.tinypic.com/5ousuv.png

我已经做了一些搜索,并提出了很多混合结果,使用Dojo来切换显示vs隐藏的div.

• dojo.style它看起来有些用途可能已被替换dojo.fx
• 一些使用dijit但因此无法访问DOM节点.
• 有些人利用show()和hide()
• 有些人改变了CSS

我似乎无法让他们中的任何一个工作.

有人可以指点我这是一个最新的walkthru.

解决了

使用以下组合......

dojo.addOnLoad(function() {
      dojo.style(dojo.byId('myDiv'), "display", "none");
});

并切换它

function toggleDivs(){
    if(   dojo.style(dojo.byId('myDiv'), "display") == "none"){
        dojo.style(dojo.byId('myDiv'), "display", "block");
        dojo.style(dojo.byId('myDiv2'), "display", "none");
    } else {
        dojo.style(dojo.byId('myDiv'), "display", "none");
        dojo.style(dojo.byId('myDiv2'), "display", "block");
    }
}

基本的想法是我有一堆div,其中每个都可以切换(显示/隐藏).

切换一个div时,我想要显示当前显示为隐藏的其他div,因此一次只能显示一个div.

另外,我希望能够在元素外部单击以隐藏open div.

为了让事情更清楚,我提供了一个示例,它目前正在做我想要的一切,除了在打开另一个时关闭一个div(一次只打开一个div功能):

$(document).ready(function(){

  $('div.dropdown').each(function() {
    var $dropdown = $(this);

    $("a.dropdown-link", $dropdown).click(function(e) {
      e.preventDefault();
      $("div.dropdown-container", $dropdown).toggle();
      return false;
    });

});
    
  $('html').click(function(){
    $("div.dropdown-container").hide();
  });
     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-2" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-3" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: …

我有一个div,其中包含帐户管理页面上的设置和选项.

$("#moreOptions").slideToggle('slow');
if ($("#moreOptions").is(":visible") == true) {
    $("#lnkMoreOpt").text("Less Options «")
}
else {
    $("#lnkMoreOpt").text("More Options »")
}

上面的代码应该根据它是否可见来更改更多/更少选项链接的文本,但是看起来jQuery不会将切换视为使其不可见/可见.

如何在仍使用切换功能的同时实现此功能？

简单的html和jQuery

<label><input id="rdb1" type="radio" name="toggler" value="1" />Money</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" />Interest</label>

<div id="blk-1" style="display:none">
    ...
</div>
<div id="blk-2" style="display:none">
    ...
</div>

$(function() {
    $("[name=toggler]").each(function(i) {
        $(this).change(function(){
            $('#blk-1, #blk-2').hide();
            divId = 'blk-' + $(this).val();
            $("#"+divId).show('slow');
        });
    });
 });

但是,所需的切换效果不起作用.单击一个单选框无法隐藏另一个单选框.

有任何想法吗？

我试图在点击按钮时切换div文本.我尝试根据变量获取范围变量和toggeling classname.我在哪里弄错了

<button ng-click="toggle()">test </button>
    <div ng-class="{{state}}" >
        hello test
    </div>


function ctrl($scope) {    
    $scope.state = vis;
    $scope.toggle = function () {
      state = !state;
    };
}

 .vis{
      display:none;
}