Tag: toggle

切换菜单onclick，单击菜单链接关闭 – 但仅限于移动视图

当窗口宽度低于768px时，我为单页网站制作了响应式菜单，切换到可切换菜单。 基本上我希望通过单击标题来切换菜单，然后通过再次单击菜单链接（ li -element）来关闭菜单。 到目前为止我的jQuery代码： jQuery(document).ready(function() { var e = $(“#pull”); menu = $(“#header ul”), $(e).on(“click”, function(e) { e.preventDefault(), menu.slideToggle() }), $(window).resize(function() { menu.is(“:hidden”) && menu.removeAttr(“style”) }) }); $(“#header ul”).on(“click”, “li”, function () { $(“#header ul”).hide(); }); 还有一个演示的jsfiddle： http ： //jsfiddle.net/ansoqvms/2/ 因此，单击标题时打开和关闭菜单工作正常。 当点击菜单li -element时，菜单也会消失。 遗憾的是 ，当单击菜单链接时，菜单不仅会在移动视图中消失，而且还会在普通视图中（> 768px）消失。 我尝试使用if($(window).width() < 768px) ，但这不是跨浏览器的快乐。 我也尝试使用if($(‘#pull’).is(‘:visible’)) ，因为#pull仅在移动视图中可见，但它也没有用。

仅在某个窗口宽度之上切换动画

我想使用Toggle-Event，但仅当窗口宽度超过一定大小时。 DIV应该始终可见。 我的解决方案有点工作，但是一旦我调整窗口大小，if语句就不再触发了。 任何提示？ 这是链接： http ： //jsfiddle.net/mihaene/wMrjc/

使用toggleClass（）的jQuery toggle（）

我有一个按钮可以打开和关闭DIV层。 我正在尝试向按钮添加一个类，以便当它在其上切换时显示不同，但是我无法使其工作，在切换按钮时不会添加该类。 该按钮是列表项，例如开/关 这是我的代码： $(“#btninformation”).click(function () { $(“#map-items-category-one”).toggle(“slow”, function() { $(this).toggleClass(“toggled-on”); }); }); 任何想法都有错吗？ 谢谢扎克

jQuery切换不断重复

我对jQuery很新，但看起来很简单。 同样，我无法弄明白。 我正在尝试在两个动画函数之间切换，但是当函数二完成时，它继续并且也调用函数一。 function toggleThis(){ $(“#navSliderArrow”).toggle(function() { $(this).animate({ marginLeft: ‘235’ }, 500); $(“#sliderArrow”).attr(“src”, “images/hide_nav.gif”); }, function() { $(this).animate({ marginLeft: ‘0’ }, 500); $(“#sliderArrow”).attr(“src”, “images/show_nav.gif”); }); } 我究竟做错了什么？ 〜GYZ

jQuery在两个以上的类之间切换

我已经在这里发布了一个关于jQuery toggle方法的问题但是问题是即使使用migrate插件它也行不通。 我想写一个将在五个类之间切换的脚本（0 – > 1 – > 2 – > 3 – > 4 – > 5）。 这是我使用的JS代码的一部分： $(‘div.priority#priority’+id).on(‘click’, function() { $(this).removeClass(‘priority’).addClass(‘priority-low’); }); $(‘div.priority-low#priority’+id).on(‘click’ ,function() { $(this).removeClass(‘priority-low’).addClass(‘priority-medium’); }); $(‘div.priority-medium#priority’+id).on(‘click’, function() { $(this).removeClass(‘priority-medium’).addClass(‘priority-normal’); }); $(‘div.priority-normal#priority’+id).on(‘click’, function() { $(this).removeClass(‘priority-normal’).addClass(‘priority-high’); }); $(‘div.priority-high’+id).on(‘click’, function() { $(this).removeClass(‘priority-high’).addClass(‘priority-emergency’); }); $(‘div.priority-emergency’+id).on(‘click’, function() { $(this).removeClass(‘priority-emergency’).addClass(‘priority-low’); }); 这不是代码的第一个版本 – 我已经尝试过其他一些东西，比如： $(‘div.priority#priority’+id).toggle(function() { $(this).attr(‘class’, […]

切换图像以展开全部并折叠全部

我试图交换所有崩溃的图像并在点击上扩展所有但我真的没有得到它请任何人帮助我…提前感谢 这里是样本的链接http://www.ornusweb.com/showcase/checking/collapsible-menu.html一切正常，除了我们点击它的展开全部折叠所有按钮。 它应该交换图像 请帮我 ！！！ 这是css body { font: 10pt Arial, Helvetica, Sans-serif; } a { text-decoration: none; } #example1, #example2, #example3, #example4, #example5 { float: left; } .expand_all{ cursor: pointer; } .collapse_all { cursor: pointer; } .example_menu { font-size: 90%; list-style: none; margin: 0; padding: 0; vertical-align: top; width: 624px; } .example_menu ul { […]

显示切换隐藏其他div jquery

我有2个链接，都显示不同的div。 我已经让它滑动了所有罚款。 但我需要它做的是折叠相反的切换（如果它打开）。 与手风琴面板的工作方式类似（当您触发显示切换链接时，打开的面板关闭，新触发的面板打开）。 这是我目前正在使用的jQuery //Left reveal toggle $(“.left-reveal-toggle”).on(“click”, function () { $(‘.left-reveal-section’).slideToggle(“slow”); $(“.left-reveal-toggle”).toggleClass(“active”); }); //Right reveal toggle $(“.right-reveal-toggle”).on(“click”, function () { $(‘.right-reveal-section’).slideToggle(“slow”); $(“.right-reveal-toggle”).toggleClass(“active”); }); 这是一个有效的JSFiddle链接： http ： //jsfiddle.net/wq73aeuh/1/ //Left reveal toggle $(“.left-reveal-toggle”).on(“click”, function() { $(‘.left-reveal-section’).slideToggle(“slow”); $(“.left-reveal-toggle”).toggleClass(“active”); }); //Right reveal toggle $(“.right-reveal-toggle”).on(“click”, function() { $(‘.right-reveal-section’).slideToggle(“slow”); $(“.right-reveal-toggle”).toggleClass(“active”); }); .left-panel { min-height: 400px; background: #31b9ce; width: 50%; […]

隐藏其他div时展开图像

我目前正在使用fancybox thambnails和button helper。 目前我已经完成了我想要的工作，但我希望当图像扩展并且放大图像上方的多余空间消失时，幻灯片下方的缩略图会消失。 这两者都很混乱，它们重叠并做各种奇怪的事情，当图像被放大时我并不认为你需要缩略图（导航点）。 任何帮助都会很棒。 如果有帮助，您可以在我的网站shereewalker.com上查看该问题 这是我的HTML： 和CSS #fancybox-buttons { position: fixed; left: 0; width: 100%; z-index: 9000; } #fancybox-buttons.top { top: 10px; } #fancybox-buttons.bottom { bottom: 10px; } #fancybox-buttons ul { display: block; width: 166px; height: 30px; margin: 0 auto; padding: 0; list-style: none; border: 1px solid #111; border-radius: 3px; -webkit-box-shadow: inset 0 […]

jquery slideToggle调用一次

这可能非常简单，但是大约凌晨2点而且非常困倦:) 我有一个简短的脚本，其中“slideToggle”div不显示。 $(‘#cmnt_add’).click(function () { $(‘.dark_div_add’).slideToggle(1100); }); 有没有机会进行一次锻炼，所以如果打开未显示的DIV，点击相同的链接将无法做到这一点？ 先感谢您！

最小化div最大化？ 适用于所有div的javascript或jquery

我想给我的div提供最小化和最大化的设施..因为我已经在我的jsp页面中编写了以下代码 /img/Minimize.png” /> 以下是我的CSS #widnow{ width:400px; border: 1px solid #DCDCDC; } #button{ width: 25px; height: 24px; float:right; cursor:pointer; position:relative; margin: 0px 0px 0px 0px; } #title_bar{ background-image: url(“http://sofzh.miximages.com/javascript/%=request.getContextPath()%>/img/Header Background.png”); height: 25px; width: auto; border-bottom: 1px solid #DCDCDC; } 以下是我的js $(“#button”).click(function(){ var isclass = $(this).attr(‘class’); if (isclass == “max”) { $(“#max”).attr(“src”,”http://sofzh.miximages.com/javascript/%=request.getContextPath()%>/img/Minimize.png”); $(this).removeClass(‘max’); } else{ $(this).addClass(‘max’); $(“#max”).attr(“src”,”http://sofzh.miximages.com/javascript/%=request.getContextPath()%>/img/Maximize.png”); […]