标签: toggle
jQuery show/hide/toggle工作,但不能保持原样 - 它恢复到原始状态
我尝试使用jQuery显示/隐藏FAQ问题的答案.我们的想法是列出所有问题,并且只有当用户想要查看他们点击问题(看起来像链接)的答案时,才能看到答案.
除了单击单击后答案恢复到原始状态外,它的工作方式很有效.在这种情况下,这意味着当我单击问题以显示答案时,它会显示然后在下一个瞬间消失,而不是保持可见,直到再次单击以将其切换为隐藏.
我已粘贴以下代码:
<!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="jquery-1.3.2.min.js" ></script>
<script>
$(document).ready(function() {
$('div.showhide,#answer').hide();
$('#question').click(function(){
$('div.showhide,#answer').toggle();
});
});
</script>
</head>
<body>
<p><a href="" id="question" name="question">Question</a></p><div id="answer" name="answer">Answer</div></p>
</body>
</html>
推荐指数
解决办法
查看次数
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> …推荐指数
解决办法
查看次数
JQuery仅切换1个项目而其他未点击的项目
好吧,我有这个Jquery将切换页面上的一些单选按钮.我想要它,所以当有人点击其中一个单选按钮时,其他按钮不会被点击.目前,我有它的方式,他们可以一次选择3,我需要它像一个常规的单选按钮,一个被点击,其他不是
jQuery的:
$(function () {
$('.box-ul .btn .dot').click(function () {
$(this).toggleClass('clicked');
});
});
HTML:
<div class="box-ul box-video right">
<ul>
<li><span class="yes"></span><p>Easy to Use</p></li>
<li><span class="yes"></span><p>Step by Step<br /><span>details instructions</span></p></li>
<li><span class="yes"></span><p>Setup time<br /><span>under 30 mins</span></p></li>
<li class="btn btn-expanded">
<div class="btn-t">
<span class="dot left"></span>
<p class="left">Expanded<br />
<span>This is the extend button It has space for slightly more info.</span>
</p>
<div class="cl"> </div>
</div>
</li>
<li class="btn">
<div class="btn-t">
<span class="dot left"></span>
<p class="left">Green Doggies</p>
<div class="cl"> </div>
</div>
</li>
<li class="btn">
<div …推荐指数
解决办法
查看次数
从asp.net中的gridview获取已检查的行
我GridView在ASP.net中有一个CheckBox列.用户可以切换CheckBox.现在,我想要的是当用户点击一个按钮时,应该显示检查GridView位置的所有记录CheckBox.在另一个按钮上,应该显示相反的状态......
我没有得到相同的逻辑.
任何人都可以帮我逻辑..
推荐指数
解决办法
查看次数
jQuery:event.preventdefault无法使用Firefox(mac和PC)
我有一些jQuery切换H3链接后的段落.它适用于PC上的IE和Chrome以及Mac上的Safari和Chrome.在两个平台上的Firefox上,单击链接什么都不做？
<script type="text/javascript">
$(document).ready(function(){
$("#rightcolumn .article .collapse").hide();
$("#rightcolumn h3 a").click(function(){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
};
$(this).parent().next().toggle(400);
});
});
</script>
如果我禁用event.preventDefault(); 它在Firefox中有效,但当然我将页面跳到顶部,我不想要.我该怎么做才能让它在Firefox中运行？
推荐指数
解决办法
查看次数
点击添加div,然后在每次点击后切换它
我正在尝试点击添加,添加的内容将首次出现.
添加之后,我想点击添加,它只会切换"添加",而不是在每次点击时添加"添加"
jQuery的:
$(function(){
var NewContent='<div class="added">Added</div>'
$(".add").click(function(){
$("#spin").after(NewContent);
});
});
HTML:
<span class="add">add</span>
<span id="spin"></span>
这是一个小提琴:http://jsfiddle.net/Abgec/
推荐指数
解决办法
查看次数
以编程方式在Android中创建Parallelogram Drawable
我正在尝试重新创建在冰淇淋三明治中看到的切换幻灯片,但不适用于ICS以下的Android版本.我正处于我对滑块感到舒服的地步,但我目前正在使用两个平行四边形图像(一个用于关闭状态,一个用于其开启状态).我想在运行时理想地创建drawable,并根据状态简单地改变它的颜色.这最终会有助于定制.
我对一般的drawable很新,并且想以编程方式创建这个,因为在我们的框架中我们不使用xml.
创建它的原因是平行四边形是一个单一的部分,使得缩放更易于管理和定制.
任何帮助将不胜感激,如果您需要更多信息,请告诉我们!
这是androids toggle的样子,我想在他们之后建模:
如果您需要任何其他详细信息,请告诉我,我希望我能以有意义的方式解释我所追求的内容.
谢谢!
推荐指数
解决办法
查看次数
使用javascript显示/隐藏脚本
我有一个显示/隐藏脚本,我用于菜单.当我点击主链接时,它会在其下方显示一个列表.我想知道是否有一种方法可以改变它,以便当我点击它打开的链接时,但当我点击下一个它关闭另一个而不是让它们全部打开,除非你再次点击它关闭.
这是我的脚本:
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
<a href="#" onclick="toggle_visibility('list1');">
<p>List One</p>
</a>
<div id="list1" style="display:none;">
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>
推荐指数
解决办法
查看次数
React - inline onfocus占位符=''
我通常使用内联onfocus/blur来切换输入中的占位符文本.像这样:
<input type="text" placeholder="Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name'"/>
这似乎在React中不起作用,我想知道在React中处理占位符切换的"正确"方法是什么.
推荐指数
解决办法
查看次数
React.js实现菜单[突出显示活动链接]
以下React.js代码使用两个名为“ about”和“ project”的链接来渲染导航栏。在页面加载时，“关于”链接处于活动状态，并显示为红色。单击另一个链接后，导航栏的状态将设置为“项目”，“链接”样式将重新设置，并且“项目”将显示为红色。
我通过在两个链接标记上附加一个单击处理程序，并将active状态设置为event.target.innerHTML的名称来实现。
我是新来的反应者，我认为这是解决该问题的非常冗长的方法。我知道有一个activeClassName属性可以传递给react-router链接，但是我想要一种不使用它的方法。
import React, { Component } from 'react'
import { Link, Route } from 'react-router'
export default class Navbar extends Component {
constructor() {
super();
this.state = {
active: 'about'
}
this._handleClick = this._handleClick.bind(this);
}
_handleClick(e) {
this.setState({
active: e.target.innerHTML
});
}
render() {
let aboutStyle;
let projectStyle;
if (this.state.active === 'about') {
aboutStyle = { color: '#ff3333' };
projectStyle = {};
} else {
aboutStyle = {};
projectStyle = { color: '#ff3333' };
}
return …推荐指数
解决办法
查看次数
标签 统计
toggle ×10
jquery ×5
javascript ×3
reactjs ×2
show-hide ×2
android ×1
append ×1
asmselect ×1
asp.net ×1
checkbox ×1
drawable ×1
firefox ×1
gridview ×1
html ×1
html-select ×1
hyperlink ×1
input ×1
placeholder ×1
slidetoggle ×1