好吧,我有这个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 …我正在尝试显示一段文字,然后在下面是一个"阅读更多"链接,当我点击链接时,更多的文本应该向下滑动,链接的文本应该读作"Read Less",然后当他们点击它时,文本应该向上滑动,链接文本再次"Read More".
$('#more').click(function() {
$('#the_more').slideToggle("slow", function () {
$('#more').html("Read Less");
});
});
有人发现任何问题？
我正在使用这个非常简单的jQuery代码:
$("h3").click(function(){
$(this).next("table").slideToggle("slow");
});
结果本身实际上是有效的,桌子确实在点击时出现/消失,但是没有"幻灯片"的效果 - 我试过没有"慢"和"慢" - 同样的结果!？
它几乎就像我只是使用.toggle()......
我不知道除了桌子的大小之外还有什么可能是错的,这只是最多12行.
有任何想法吗？
我正在使用下面的函数来切换div,并且使用它,可以独立于所有条目打开或关闭任何一个条目内容div.
如果只有一个入口内容div可以随时打开,那将会是多么美妙.单击关闭的entry-title div将关闭任何其他entry-content div,然后打开单击的div.我需要保留html标记,因为它是由Wordpress动态创建的.这可能吗？
功能:
jQuery(document).ready(function($) {
$(".entry-content").hide('slow');
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500); });
});
HTML
<div class="entry-post">
<h2 class="entry-title">Post Title 1</h2>
<div class="entry-content">Lorem Ipsum...
</div></div>
<h2 class="entry-title">Post Title 2</h2>
<div class="entry-content">Lorem Ipsum...
</div></div>
More of the same....
</div>
我在单页网站上使用jquery slidetoggle.我一直试图弄清楚我的脚本出错了但似乎无法解决这个问题.我试图让幻灯片切换效果在页面打开时开始关闭,仅在单击时打开/关闭.现在,当页面打开时,幻灯片切换的每个部分都已打开:/任何帮助将不胜感激.
<script type="text/javascript">
jQuery(function($) {
var openText = 'Open';
var closeText = 'Close';
$('.item-util .more-toggle').toggle(
function() {
$(this).html(closeText);
$(this).parent().siblings('div').slideToggle('slow');
},
function() {
$(this).html(openText);
var returnTo = $(this).parents('.item');
$.scrollTo(returnTo, {offset:{top:-150, left:0}, duration:600});
$(this).parent().siblings('div').slideToggle('slow');
}
);
});
</script>
谢谢
我在IE8中使用.slideToggle jQuery函数表现不佳.它要么波动,要么完全冻结浏览器.在firefox chrome opera等中运行得很好
我认为它可能与我的DOCTYPE属性有关？我不确定.但是,我尝试了很多本网站及其他网站提到的解决方案,但到目前为止还没有一个解决方案,包括确保没有任何滑动元素设置为position:relative.
这是脚本和HTML.基本上,当用户单击上部div中包含的单选按钮上的按钮时,上部div会折叠,而下部div会打开更多按钮.它们最初被隐藏,因此检查.css('display'):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
function btnList_Type_Click() {
$('#btnList_Type_Div').slideToggle(200, null);
if ($("#btnPanelTwo").css('display') == 'none') {
$('#btnPanelTwo').slideToggle(200, null);
}
if ($("#btnList_Date_Div").css('display') == 'none') {
$('#btnList_Date_Div').slideToggle(200, null);
}
}
<div id="btnPanelTwo" class="lightPanel" onmouseover="page.cursor('pointer')" onmouseout="page.cursor('default')"
style="height: 36px; width:320px; margin-left:20px; margin-top:0px; display:none;">
<span style="font-size: 13pt; left: 14px; top:10px;">Step 2:    Choose Date Range:</span>
</div>
<div id="btnList_Date_Div" style="margin-left:60px; width:320px; height:325px; display:none;">
<asp:RadioButtonList
ID="btnList_Date" runat="server" style="margin-left: 35px; margin-top:12px;"
Width="226px" AutoPostBack="False" Font-Size="11pt"
</asp:RadioButtonList>
<asp:TextBox ID="txt_StartRange" class="textbox" runat="server" style="margin-left: …javascript performance jquery internet-explorer-8 slidetoggle
我有一个网站,其中有一个名为.slidingDiv,当点击锚.show_hide时,它会出现并向下滑动,这是页面上唯一的内容.
如果此div上方还有其他内容,则不会向下滚动显示.相反,它显示div但它不在网站上,所以它确实有效,但不会推动其余的内容.
这是JQuery:
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle(), 1000;
scrollTop: $(this).offset().top
});
});
</script>
非常感谢
皮特
我有以下代码将div(被调用#extra)切换到视图中:
$('#more').click(function() {
$('#extra').slideToggle('fast');
return false;
});
我的点击功能是这个链接:
<a href="#" id="more">More about us</a>
当#extradiv显示时,如何将"关于我们的更多信息"文本更改为"更少关于我们" ？当点击相同的链接隐藏div时,我希望链接的文本更改为"更多关于我们".
我正在尝试在具有最小高度的 div 上使用 jQuerys slideToggle。这会导致动画跳跃而不是平滑移动。我已经花了一段时间寻找解决方案，但我无法获得任何工作。我在 jsfiddle 上做了一个例子，如果有人能帮我解决这个问题，我将不胜感激。
我用于 div 的 css 被切换：
#selected-display{
height:calc(100vh - 50px);
display:none;
min-height: 750px;
}
我的javascript：
$(document).ready(function(){
$(".toggle-display").click(function(){
$("#selected-display").slideToggle("slow");
});
});
我在使用 jquery 折叠列表时遇到问题：-
html文件
<ul>
<li class="dir">subject1
<ul>
<li class="dir">lab1
<ul>
<li>lab1.pdf</li>
</ul>
</li>
<li class="dir">lab2
<ul>
<li>lab2.pdf</li>
</ul>
</li>
<li class="dir">lab3
<ul>
<li>lab3.pdf</li>
</ul>
</li>
</ul>
</li>
<li class="dir">subject2
<ul>
<li class="dir">lab1
<ul>
<li>lab1.pdf</li>
</ul>
</li>
<li class="dir">lab2
<ul>
<li>lab2.pdf</li>
</ul>
</li>
<li class="dir">lab3
<ul>
<li>lab3.pdf</li>
</ul>
</li>
</ul>
</li>
<li class="dir">subject3
<ul>
<li class="dir">lab1
<ul>
<li>lab1.pdf</li>
</ul>
</li>
<li class="dir">lab2
<ul>
<li>lab2.pdf</li>
</ul>
</li>
<li class="dir">lab3
<ul>
<li>lab3.pdf</li>
</ul>
</li>
</ul>
</li>
</ul>
脚本
$('.dir').click(function() {
$(this).children().slideToggle();
}); …jquery ×10
slidetoggle ×10
javascript ×4
html ×3
css ×2
toggle ×2
list ×1
onclick ×1
performance ×1