标签: toggle

高!

我想要做的是以下内容:我有一个带有onclick的表连接到位于偶数行的表中的链接.每个奇数行都是隐藏的.单击该链接时,将显示奇数行,并将数据加载到该行中.工作良好

现在我想要做的是,无论何时完成该过程,我想将新的点击功能附加到该链接,使该行再次隐藏.有点像切换,但后来有一些更多然后只是显示/隐藏功能.我尝试使用以下代码执行此操作,但无法使其工作.

我肯定会错过一些非常基本的东西,或者只是不太了解jquery(这很可能,因为我刚开始几周前).

$(document).ready(function(){

    // The version icons
    $("a.version").click(function () {
        var sLink = $(this).attr("href");
        var nexttr = $(this).parent().parent().next("tr.version");
        var nexttrtd = nexttr.find("td:first");
        $.get(sLink, function(sData){
            nexttrtd.html(sData);
            nexttr.show();
        });

        $(this).click(function(){
            attachHideMyChildren();
        });

        return false;
    });
});

function attachShowMyChildren()
{
    var sLink = $(this).attr("href");
    var nexttr = $(this).parent().parent().next("tr.version");
    var nexttrtd = nexttr.find("td:first");
    $.get(sLink, function(sData){
        nexttrtd.html(sData);
        nexttr.show();
    });
    $(this).click(function(){
        attachHideMyChildren();
    });
    return false;
}

function attachHideMyChildren()
{
    $(this).parent().parent().next("tr.version").hide();
    $(this).click(function(){
        attachShowMyChildren();
    });
}   

它打开表行,插入数据但是不附加函数再次关闭行.我怎么能让这件事发生？

有任何想法吗？

这段代码是用简单的ActionScript编写的,但我假设我的这个问题会出现在所有具有布尔数据类型的语言中.

我只是单击舞台,以便我的布尔变量反转其值,而不是跟踪/打印/记录它的新值.但是,它总是跟踪真实,而不是在每次鼠标点击时在true和false之间切换.

我究竟做错了什么？

var myBool:Boolean;

stage.addEventListener(MouseEvent.CLICK, mouseClickHandler);

function mouseClickHandler(evt:MouseEvent):void
    {
    changeBoolean(myBool);
    }

function changeBoolean(boolean:Boolean):void
    {
    boolean = !boolean;
    trace(boolean);
    }

使用此功能,我打开一个图层并用远程内容填充它.这种切换情况的问题在于,在第二次单击(关闭)时,它再次加载远程内容.我怎么能防止这种情况？

 $("#slideopen").click(function () {
    $(".slide").load("/v3/ajax/timeline.php?id=<?php echo $cam_id; ?>");    
    $('.slide').slideToggle("slow");
  });

我有一组缩略图,我想在选择另一个缩略图时减少到40%.原始缩略图将保持100%不透明度.我需要为淡出的缩略图设置一般版本,以便在页面上的任何位置单击将使其他拇指恢复到100%不透明度.

以下是演示:http://www.dumstr.com/sofeb11/stash/

JS:

$(function() {           
    $("div#fadeout .stashthumb").click(function () {             
            $(this).siblings().stop().animate({opacity: 0.4}, 300);   
    },          
    function () {      
            $("div#fadeout .stashthumb").stop().animate({opacity: 1.0}, 300);       
    });

HTML

<div id="fadeout" class="stasher">

     <div style="opacity: 1;" class="stashthumb">
     <span><a href="#"><img src="img/stash-01.jpg"></a></span>
     </div>
</div>

谢谢!

我有一个菜单,它应该作为点击菜单工作,所以当点击按钮时会出现一个菜单,当再次点击该按钮时,菜单应该消失,但我不能让它工作？

我有这个脚本

<script type="text/javascript">
      $(document).ready(function() { 
        $('#dropdown').click(function(){
            setTimeout(function(){
                $('#dropdown').attr("id", "dropdown2");
                $('#dropmenu').addClass("open");
                //$('#dropmenu').fadeIn('fast');
            },500);
        })
        $('#dropdown2').click(function(){
            setTimeout(function(){
                $('#dropdown').attr("id", "dropdown");
                $('#dropmenu').removeClass("open");
                //$('#dropmenu').fadeIn('fast');
            },500);
        })
      });
    </script>

它在添加类时起作用,但是当我再次单击该按钮时,它不会删除"打开"类

如果我有两个代码块并且我想在它们之间切换(例如,出于测试目的),我意识到你可以使用这样的注释:

//*
<chunk #1, active code here>
//*/

/*
<chunk #2, commented out code here>
//*/

然后在它们之间切换我只需要添加一个/#2以上并/从#1上面删除一个.我知道IDE有"切换评论"命令,但我认为这更快,更少杂乱.

/*
<chunk #1, active code here>
//*/

//*
<chunk #2, commented out code here>
//*/

这显然是有效的,因为行注释实际上注释掉了/*所以块注释没有被解析,并且//实际注释掉的结尾也是如此*/.

我的问题是,如果有更好的方式通过评论做这样的事情,或者这种方法是否像评论一样"光滑"？

我有一些类似的div,我正在用这样的基本代码切换:

 $(".field-group-format-toggler-abstract").click(function()
            {
        $(".field-group-format-wrapper").toggle();
   });

我遇到的问题是每当我触发"+"时,当我只想切换最接近它的相关div时,它会切换所有其他具有相同类的div .field-group-format-wrapper.我试过.next和.closest,但这似乎锁定了一些东西然后它不起作用我没有得到语法错误,例如

$(".field-group-format-toggler-abstract").click(function()
                {
            $(".field-group-format-wrapper").closest().toggle();
       });

我在这里创建了一个工作版本,但如果你像我上面那样添加.closest,它就不再起作用了.

http://jsfiddle.net/LHguJ/5/

**注意,我只想显示/隐藏内容field-group-format-wrapper和其他内容,因此"标题"仍然需要显示是否扩展.

我有以下jQuery,点击按钮切换手风琴菜单:

jQuery的:

$(function() {  
 $('#chooseOption').click(function(){
  $('#accordion ul').toggle();
 });    
});

它很棒!

现在,我想知道我是否可以在切换时更改CSS height和background元素.所以,当我点击chooseOption它会改变height与background该元素的.

默认CSS:

#chooseOption {height:35px;background-image:url('1.jpg');}

单击它将更改为:

#chooseOption {height:55px;background-image:url('2.jpg');}

非常感谢您对此的任何指示.

希望有人可以帮忙!我是一个jQuery/JS新手.有没有一种简单的方法可以将多个功能压缩成一个.我正在使用jQuery来扩展和折叠一些隐藏的div.我已经使用下面的代码工作得很好了,但是可能有50多个(不仅仅是4个)并且我假设有一种方法可以将它们压缩成优化名称中的一小部分代码.非常感谢任何帮助.这是JS ......

$('#toggle1').click(function() {
    $('.toggle').slideToggle('fast');
    return false;
    });

    $('#toggle2').click(function() {
    $('.toggle2').slideToggle('fast');
    return false;
    });
    $('#toggle3').click(function() {
    $('.toggle3').slideToggle('fast');
    return false;
    });

    $('#toggle4').click(function() {
    $('.toggle4').slideToggle('fast');
    return false;
    });

这是HTML ...

 <div class="docBlocA">
  <div class="docTitle" id="toggle1">Document Title Goes Here (click to expand)</div>
  <div class="toggle1" style="display:none; width:100%;">Hidden div content here</div>
 </div><!--docBlocA-->

 <div class="docBlocB">
  <div class="docTitle" id="toggle2">Document Title Goes Here (click to expand)</div>
  <div class="toggle2" style="display:none; width:100%;">Hidden div content here</div>
 </div><!--docBlocB-->

 <div class="docBlocA">
  <div class="docTitle" id="toggle3">Document Title Goes Here (click to expand)</div>
  <div class="toggle3" style="display:none; …

我创建了一个菜单div,用于在鼠标单击时显示/隐藏其下方的另一个div.但是,我需要菜单div上的箭头来切换点击.您知道箭头指向侧面的方式,但在单击菜单div并显示其他div时向下切换.我有下面的CSS代码和HTML.

PS:我只需要使用CSS.

CSS:

.drop {
  cursor: pointer;
  display: block;
  background: #090;
}

.drop + input{
 display: none; /* hide the checkboxes */
}

.drop + input + div{
  display:none;
}

.drop + input:checked + div{
  display:block;
}

排队:

<label class="drop" for="_1">Collapse 1 </label>

<input id="_1" type="checkbox"> 
<div>Content 1</div>

非常感谢您的帮助!