标签: toggle

jQuery从select选项中切换div

我需要从下拉选择框中切换div.我喜欢它类似于jquery的asmselect,但不是列出选项标签我想它显示一个隐藏的div.那里有这样的东西吗？或者任何人都知道如何设置它？谢谢,杰夫.

更新

基本上我想要的是上面的asmselect链接的外观和交互,虽然切换div而不是生成列表.示例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jQuery1.3.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $("#theSelect").change(function(){          
        $("#theSelect option:selected").click(function(){
            var value = $(this).val();
            var theDiv = $(".is" + value);

            $(theDiv).toggle(function(){
                $(this).removeClass("hidden");
            }),function(){
                $(this).addClass("hidden");
            }
        }); 
    });

});

</script>
<style type="text/css">
.hidden {
    display: none;
}
</style>
</head>

<body>
    <div class="selectContainer">
        <select id="theSelect">
            <option value="">- Select -</option>
            <option value="Patient">Patient</option>
            <option value="Physician">Physician</option>
            <option value="Nurse">Nurse</option>
        </select>
    </div>
    <div class="hidden isPatient">Patient</div> …

Run Code Online (Sandbox Code Playgroud)

jquery html-select toggle asmselect

Jef*_*rey

2012 03-03

4
推荐指数

1
解决办法

3万
查看次数

Flash切换按钮

我需要一个Flash/AS3中的按钮,可以在打开和关闭之间切换.所以我很高兴看到这个Button类有toggle属性让我有这种行为.我不太高兴看到当我在Flash文件中创建一个"按钮"时得到的是SimpleButton类的实例,它没有该选项.

有没有办法从.fla获取Button实例,或者让SimpleButton表现为切换？

flash button actionscript-3 toggle simplebutton

Sie*_*tse

lucky-day

3
推荐指数

1
解决办法

1万
查看次数

jQuery text()改变了toggle()？

我想创建一个脚本,根据其他元素可见性更改切换链接文本.

因此,虽然#form是可见的,但我希望#form-container文本为"Hide ...",虽然它是隐藏的,但我希望文本为"Show ...".

我试过这一行 - 如果($('#form').是(":visible")){另一种方式:if($('#form').is(":visible")=="true "){ - 但它也不起作用.

怎么了？每次切换另一个项目时如何更改文本？

$('.toggle').click(
    function()
    {
        $('#form').slideToggle();

            if($('#form').is(":visible")){
                $('#form-container a').text("Hide form container");
            }
            else {
                $('#form-container a').text("Show form container");  
            } 
    });

Run Code Online (Sandbox Code Playgroud)

谢谢.

javascript jquery toggle

bat*_*bat

2010 08-13

3
推荐指数

1
解决办法

2万
查看次数

javascript onclick淡入淡出div(短代码)

我一直在寻找各处,无法找到任何地方.

html结构基本上是.

<ul> 
   <li><a href="">link</a></li>
   <div id="us">hidden info</div>
</ul>

Run Code Online (Sandbox Code Playgroud)

css结构是.

#us {display:none}

Run Code Online (Sandbox Code Playgroud)

我喜欢它,所以当点击"链接"时,div"us"从dipslay改为:none; 显示:阻止,在尽可能少的代码行中优雅地淡入淡出,然后在单击链接时再次切换回显示:隐藏.

我知道有很多东西可以做到这一点,但我真的在寻找代码中的简单性.

谢谢你的时间x

html javascript jquery fade toggle

Owe*_*wen

lucky-day

3
推荐指数

1
解决办法

9012
查看次数

jQuery fadeToggle如果当前是动画的,则忽略进一步的输入

我有一些缩略图,当你悬停时,它们会有一个淡入淡出的播放按钮.我的问题是,当你反复盘旋它们时,说三次,它们会淡入淡出三次.我曾经遇到过一个jQuery函数,其中包含一个if then语句粗略地说它是否是动画而忽略了进一步的输入..但我不确定语法是做什么的.

想法？谢谢!

这是一个jsFiddle:http: //jsfiddle.net/danielredwood/66FwR/10/

HTML:

<div id="music_right">
        <div class="thumbnail" id="paparazzi">
            <a class="playback">
                <img class="play" src="http://www.lucisz.com/imgs/play.png" />
               </a>
            <audio>
                   <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
                <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
                Your browser does not support HTML5 audio.
            </audio>
        </div>
        <div class="thumbnail" id="danceinthedark">
            <a class="playback">
                <img class="play" src="http://www.lucisz.com/imgs/play.png" />
               </a>
            <audio>
                   <source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
                <source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
                Your browser does not support HTML5 audio.
            </audio>
        </div>
        <div class="thumbnail" id="bornthisway">
            <a class="playback">
                <img class="play" src="http://www.lucisz.com/imgs/play.png" />
               </a>
            <audio>
                   <source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" …

Run Code Online (Sandbox Code Playgroud)

jquery if-statement fade toggle hover

tec*_*ant

lucky-day

3
推荐指数

1
解决办法

4051
查看次数

逐个切换多个div jquery

我想要做的是在不同的div之间切换.这有点难以解释,但我会试一试.

当页面加载时,会有div可见,4有display:none.还有一个菜单.链接1将显示第一个div并隐藏所有其他div.然后当单击链接2时,可见的div将隐藏,div2将显示.单击链接3时,可见的div将隐藏,div3将显示,依此类推.基本上一次只显示一个div.

我写了这个,但只有当有2个div时它才有效.

$(function () {
  $('#link').click(function () { 
    $('#div1, #div2').toggle();
  });
});

Run Code Online (Sandbox Code Playgroud)

但这只会显示隐藏的div并隐藏显示的那个.

好的,我做到了,发现它可以更轻松地完成.这就是我所做的.它不是很优雅,但它的工作原理.

$(document).ready(function () {
  $('.slidingDiv').hide();
  $('.show_hide').show();

  $('.show_hide').click(function () {
    $('.slidingDiv').slideToggle();
    $('.slidingDiv2').hide('slow');
    $('.slidingDiv3').hide('slow');
    $('.slidingDiv4').hide('slow');
    $('.slidingDiv5').hide('slow');
  });
});

$(document).ready(function () {
  $('.slidingDiv2').hide();
  $('.show_hide2').show();

  $('.show_hide2').click(function () {
    $('.slidingDiv2').slideToggle();
    $('.slidingDiv').hide('slow');
    $('.slidingDiv3').hide('slow');
    $('.slidingDiv4').hide('slow');
    $('.slidingDiv5').hide('slow');
  });
});

$(document).ready(function () {
  $('.slidingDiv3').hide();
  $('.show_hide3').show();

  $('.show_hide3').click(function () {
    $('.slidingDiv3').slideToggle();
    $('.slidingDiv').hide('slow');
    $('.slidingDiv2').hide('slow');
    $('.slidingDiv4').hide('slow');
    $('.slidingDiv5').hide('slow');
  });
});

$(document).ready(function () {
  $('.slidingDiv4').hide();
  $('.show_hide4').show();

  $('.show_hide4').click(function () {
    $('.slidingDiv4').slideToggle();
    $('.slidingDiv').hide('slow');
    $('.slidingDiv2').hide('slow');
    $('.slidingDiv3').hide('slow');
    $('.slidingDiv5').hide('slow');
  });
});

$(document).ready(function(){
  $('.slidingDiv5').hide();
  $('.show_hide5').show();

  $('.show_hide5').click(function () …

Run Code Online (Sandbox Code Playgroud)

html jquery toggle

Nik*_*rov

2014 03-10

3
推荐指数

1
解决办法

3万
查看次数

在JQuery中替代fadeToggle()

我有一个div我想在点击按钮时显示/隐藏的东西.安排div的是

<div id="someStats">
</div>
<div id="mainContent">
</div>
<div id="someOtherStats">
</div>

Run Code Online (Sandbox Code Playgroud)

,意思是从mainContent我控制是否显示或隐藏两个信息div的左右.这给了我以下问题:不仅fadeToggle()使其中一个div透明,其display属性设置为none,这导致mainContent淡出时的位移someStats.fadeToggle()没有指定两个函数(或拆分函数,如果有),是否有其他选择

if(div.isShown()){
   hide() 
}else{ 
   show()
}

Run Code Online (Sandbox Code Playgroud)

？或者我可以fadeToggle()以某种方式操纵？

html jquery toggle

Val*_* Ru

2012 12-01

3
推荐指数

1
解决办法

3177
查看次数

如何通过单击标题使p：panel可折叠？

我正在使用PrimeFaces 3.4可折叠面板。实际解决方案的问题在于，通过单击右侧的小按钮可以切换面板。它不是很符合人体工程学，用户希望通过单击标题上的任意位置进行切换。

这就是我要实现的：通过单击标题触发切换并删除切换按钮。这是我写的：

$('.ui-panel-titlebar').each(function(){
    var header = $(this);
    var widgetId = 'widget_' + header.attr('id').replace(/:/g, '_').replace(/_header$/, '');
    header.css('cursor', 'pointer');
    var toggler = header.find('a[id$=_toggler]');
    toggler.remove();
    header.click(function(){
        window[widgetId].toggle();
    });
});

Run Code Online (Sandbox Code Playgroud)

但是我不喜欢这种解决方案，因为首先我猜到了JavaScript小部件ID，其次，我从DOM树中删除了已渲染的切换按钮，我希望根本不渲染它。

有没有一种方法可以在不编写太多代码的情况下以更优雅的方式实现相同的效果（因此，无需重写p:panel）？作为解决方案，可以使用基于与PrimeFaces（商业友好）相同的许可证的扩展。

jquery toggle primefaces

Dan*_*lor

lucky-day

3
推荐指数

1
解决办法

5347
查看次数

如何使用JavaScript显示/隐藏隐藏的HTML表行(没有jQuery)

编辑:这已在下面得到解答.

我想有一个HTML表,每行之间有隐藏的行,有关顶级行的更多信息.单击第一列中的展开/折叠图像链接时,隐藏行的可见性将从display:none切换; 显示:table-row;.我有一段时间没有编写JavaScript,需要能够在JavaScript中严格执行此操作,并且不能使用jQuery toggle()方法.

我如何使用JavaScript来查找带有class ="parentRow"的class ="subRow"的兄弟,该按钮位于表中,然后切换该兄弟行的可见性？

HTML

<table style="width:50%">
    <caption>Test Table</caption>
    <thead>
        <tr align="center">
            <th><span class="offscreen">State Icon</span></th>
            <th>Column 2</th>               
            <th>Column 3</th>               
            <th>Column 4</th>               
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr align="center" class="parentRow">
            <td><a href="#" onclick="toggleRow();"><img alt="Expand row" height="20px;" src="expand.png"></a></td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
        </tr>
        <tr style="display: none;" class="subRow">
            <td colspan="5"><p>Lorem ipsum dolor sit amet...</p></td>
        </tr>
....
    </tbody>
</table>

Run Code Online (Sandbox Code Playgroud)

CSS

.offscreen {
  position: absolute;
  left: -1000px;
  top: 0px;
  overflow:hidden;
  width:0;
}

.subRow {
    background-color: #CFCFCF; 
} …

Run Code Online (Sandbox Code Playgroud)

html javascript css html-table toggle

Rob*_*ert

2015 06-18

3
推荐指数

1
解决办法

4万
查看次数

我有一个Android应用程序,在一个活动中我需要一个像选择器的选项卡,用户可以选择一个选项.3个选项是蓝色,绿色,红色.用户需要选择其中任何一个.我可以使用微调器.但是我喜欢使用圆形边框标签,可以切换,所选项目将突出显示,其他项目将显示为灰色,如下所示. 我只是希望用户能够只切换其中一个按钮.用户可以通过点击或切换来选择一个选项,视图应该看起来像一个带有圆边的条.如何在android中实现上面的视图？请帮我.