Tag: toggleclass

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

切换单个元素类，尽管它有多个实例: 简单的事情，我只是无法让它工作：我有几个段落共享相同的类，我只是想改变其中一个类，因为他们的父div被hover。 some content /div> some content /div> 当我hover第一个“trigger-div”时，我希望它的p改变而不影响后面的元素 some content /div> some content /div> 我有以下代码不起作用：// $(‘.trigger’).hover(function() { $(this).next(“.oldstyle”).toggleClass(“newstyle”); }); 我很无奈！万分感谢。

这个jQuery可以在vanilla JS中完成吗？: 我有这个在移动设备上工作，但由于jQuery的32kb gzip-ed我想知道是否可以创建这个代码 $(document).ready(function() { $(‘body’).addClass(‘js’); var $menu = $(‘#menu’), $menulink = $(‘.menu-link’), $wrap = $(‘#wrap’); $menulink.click(function() { $menulink.toggleClass(‘active’); $wrap.toggleClass(‘active’); return false; }); }); 可以写在没有库依赖任何香草JavaScript。可以吗？我从哪里开始？

jQuery添加一个类 – 我尝试过的所有方法都会在点击时删除该类: 我正在使用3D旋转按钮，其中每个面具有不同的短语，但两者都是指向同一URL的链接。我最初用一个普通的旧css旋转立方体按钮：hover，但我注意到当你点击按钮时它会重置。如果鼠标不再位于按钮上，它应该只能旋转回其起始位置。我创建了一个使用我所有标记和样式的笔，我尝试了四种方法在hover时添加一个名为“flip”的类来设置样式，但这四种方法中的每一种都与普通的旧css具有相同的效果：hover方法，它们在鼠标单击时重置。我在笔中评论了＃2,3和4只是因为它们都产生了相同的结果，而第一个只是一个简单的’toggleClass’方法。这是四个JS片段和笔的链接。 // #1 Story Button Toggle Class On Hover To Rotate – Resets on Click $(‘.story-button’).hover(function () { $(this).toggleClass(‘flip’); return false; }); // #2 Story Button Add/Remove Class On Hover To Rotate – Resets on Click $(‘.story-button’).hover( function () { $(this).addClass(‘flip’); }, function () { $(this).removeClass(‘flip’); } ); // #3 […]

IE8 toggleClass无法正常工作: 好吧，我有一个菜单，我希望有一个名为active的类，当它活跃时，显然。要切换这个类我使用jQuery切换function，但它只是在js元素中激活它。如果我检查dom元素，则从不设置此类。但是我需要这个类，因为我的CSS样式。我知道有很多关于toggleClass jQuery的主题，但它们不合适（至少我找不到合适的东西）这里有一些代码： $(‘#menu’).on(‘click’, ‘.tab span’, function (e) { e.stopPropagation(); var $tab = $(this).parent(‘.tab’); $tab.siblings(‘.tab.active’).removeClass(‘active’); $tab.toggleClass(‘active’); }); HTML标记它在所有浏览器中工作，IE8除外提前感谢。

JQuery UI（效果核心）addClass / removeClass在一个元素上有多个选择器……但是有一个问题: 谢谢参观。我正在尝试使用jQ UI addClass / remove类方法在单击前面的兄弟div时扩展hr元素。 jQ UI效果核心可以在两个类之间实现平滑的动画过渡： http ： //jqueryui.com/demos/removeClass/ 。此外，必须使用$动态添加hr才能实现更广泛的网站设计。以下是这个难题的部分：我的代码呈现四个100x100px兄弟div的行。这些div没有课程，但如果它有帮助，请随意添加它们 – 每个div最终都会有一个独特的课程。在每第4个div之后，有一个动态添加的hr。单击任何给定的div后，紧接的下一个hr必须切换到“open”类，这会导致行展开。如果再次单击此div，它必须从hr切换/删除“打开”类，导致hr缩小到原始大小。如果单击一个div以展开hr然后单击另一个div，则必须触发两个动画：首先，必须删除“open”类，导致行缩小，然后必须重新添加该类重新开行。但是，例如，如果单击div打开第二行，然后单击第一个hr之前的第二个div，则此操作必须先关闭第二个hr，然后打开第二个div的相应hr。我被卡住了。我已经尝试了一些jQfunction组合，但结果很糟糕。你看到的是我得到的最接近的。谢谢你给这一个人一个机会。随意添加到代码中，但您可以使其工作。 /*CSS-some of this creates other events not mentioned above. These are simplified versions of what I need for my final site design*/ .main { width: 450px; } […]

在非活动图标上更改类 – jquery: 我在标题中有两个图标，其中包含单击时切换的下拉菜单。在每个图标的每个列表项中，有一个’i’标签，它是向下箭头的Font Awesome。单击每个图标时，通过将类“fa-chevron-down”更改为“fa-chevron-up”，箭头将变为指向上方。但是，如果我单击帮助图标，帮助下拉列表会向下滑动，如果我然后单击篮子图标，则帮助下拉列表会向上滑动，篮子下拉列表会向下滑动。相关图标中的箭头也需要随之更改 – 帮助图标上的箭头需要更改为指向下方，因此课程需要从’fa-chevron-up’更改为’fa-chevron-down’ 。例如，如果篮子下拉列表处于活动状态，那么帮助图标“i”标签应该具有“fa-chevron-down”类，并且篮子图标“i”标签应该具有“fa-chevron-up”类。如果帮助下拉列表处于活动状态，则篮子图标’i’标签应该具有’fa-chevron-down’类，并且帮助图标’i’标签应该具有’fa-chevron-up’类。这是一个jsFiddle： http ： //jsfiddle.net/2srx4sv2/9/ 代码是： Untitled Document Your Account » Corporate Sales » Got a voucher? » Total items: 1 Product 1 £39.00 Product 2 £39.00 View Basket

localStorage，使用toggleClass保存一个类: 看来，当涉及到localStorage时，我一无所知。我想通过切换一个类来设置一个喜欢div组中任何div的方式。我可以让toggleClass处理单个div并保存，但localStorage将所有div保存为collections夹，而不仅仅是设置了toggleClass的div。显然我错过了一些东西。 jsfiddle简单的例子 localStorage代码： if (typeof (localStorage) == ‘undefined’) { document.getElementById(“result”).innerHTML = ‘Your browser does not support HTML5 localStorage. Try upgrading.’; } else { if (localStorage.getItem(“fav”) != null) { getFav = localStorage.fav; $(“.item”).addClass(‘favorites’); } } $(document).ready(function () { $(‘.btn’).on(‘click’, function () { getFav = localStorage.fav; //$(“.item”).removeClass(‘favorites’); //localStorage.removeItem(‘background’); $(this).closest(“.item”).toggleClass(‘favorites’); if ($(this).closest(“.item”).hasClass(‘favorites’)) { localStorage.setItem(‘fav’, ‘favorites’); […]

三种切换两种状态（Javascript或jQuery）: 我正在制作一个页面，以各种货币（欧元，英镑或美元）显示价格。我的目标是首先以欧元显示价格，保持英镑和美元价格隐藏。 Change Currency Euro Pound Dollar 单击按钮时，我需要三个ID循环显示/隐藏/隐藏，隐藏/显示/隐藏和隐藏/隐藏/显示三种状态。到目前为止，我已经使用两个ID（不难！）。 $(‘#mybutton’).click(function() { $(‘#euro’).toggleClass(‘hidden’,’shown’), $(‘#pound’).toggleClass(‘hidden’,’shown’); }); 我不知道如何将其扩展到第三个id。任何想法都感激不尽。

如何在两个div之间切换: 我试图在两个div之间切换。例如，onload，我希望显示左侧内容，并且正确的内容将保持隐藏状态。如果我单击右侧div，我希望隐藏左侧内容并显示正确的内容，反之亦然。我是javascript的新手，但这就是我所拥有的。我似乎无法让它发挥作用。请帮忙… 这是我的HTML代码： Left Right This is the content for the left side This is the content for the ride side 这是我正在使用的Javascript： function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == ‘block’) e.style.display = ‘none’; else e.style.display = ‘block’; }