天道酬勤,学无止境

jQuery toggle sibling on focus/blur

So I have this now and it works, but I wanted to know if there is an optimal way of writing this as I writing a mobile site and performance if a big thing.

Think tool-tip that slides down (toggles) under the element, I also have about 30 tool tip divs on the page as this will be for multiple elements

JS:

$('.mobile-tool-tip').each(function() { 
    $(this).hide();                         
    $(this).prev().focus(function() {
        $(this).next().slideToggle('fast');
    });
    $(this).prev().blur(function() {                    
        $(this).next().slideToggle('fast');
    });
});

HTML for mobile-tool-tip function

<div data-role="fieldcontain">
    <input type="text" name="telephone" id="telephone" placeholder="Phone Number*" />
    <div class="mobile-tool-tip" id="telephone_tip">Valid format <strong>999-999-9999</strong>. Please include the area code.</div>
</div>

Have been using this (Thanks Hunter) to toggle elements but cant get it to work with the next() and I don't want to code each tool tip div by hand

$("[name=field_name]").change(function() {
    var show = $(this).val();
    $("#hidden_div").toggle(show);
});

评论

A few suggestions:

  • Save a few milliseconds hiding .mobile-tool-tip elements with CSS.
  • Attach the event to the parent div. It's faster to find the parent element than find a siblings.
  • When you're looking for next or prev elements, and it's an specific element, I always suggest to use `nextAll(".mobile-tool-tip")
  • You're consuming time finding $(this).prev(). Don't do it twice. A lot of functions in jQuery returns a reference to the last query made, this is what enables you to chain calls (something like $(".anElement").hide().remove()). Make use of it to save time.
  • When you have an action to focus and other to blur, use an deterministic method to hide/show or enable/disable elements. This'll ensure that you didn't miss any event or special occasion, and will prevent for any bug related to it.

So:

$('.mobile-tool-tip').each(function() { 
    $(this).prev().focus(function() {
        $(this).nextAll(".mobile-tool-tip").slideDown('fast');
    }).blur(function() {                    
        $(this).nextAll(".mobile-tool-tip").slideUp('fast');
    });

});

Good luck!

Some simple thoughts.

  1. You can cache your selector and chain your calls together to avoid any iteration over the dom.
  2. You could also create a closure of your tip in your focus and blur functions which will result in no additional dom iteration.

So you might end up with something like this...

$('.mobile-tool-tip').each(function() {
    var $tip = $(this);
    $tip.hide().prev().focus(function() {
        $tip.slideToggle('fast');
    }).blur(function() {                    
        $tip.slideToggle('fast');
    });
});

jsfiddle that shows a slight performance gain when triggering the event with a closure.

You can try to combine some of the calls to the DOM by using a variable to hold the $(this).next() element. Depending on how big the file is, this can cut a substantial amount of time not having to make that call twice.

var nextElement = $(this).next();
$(this).prev().blur(function(){
$(nextElement).slideToggle();
}

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Select2打开焦点集中的下拉菜单(Select2 open dropdown on focus)
    问题 我有一个带有多个文本输入和一些select2元素的表单。 使用键盘在字段之间切换时效果很好-Select2元素的行为类似于表单元素,并在切换时获得焦点。 我想知道Select2元素获得焦点时是否可以打开下拉菜单。 到目前为止,这是我尝试过的方法: $("#myid").select2().on('select2-focus', function(){ $(this).select2('open'); }); 但是使用此代码会使下拉菜单在做出选择后再次打开。 回答1 v4.0 +的工作代码*(包括4.0.7) 以下代码将在初始焦点上打开菜单,但在菜单关闭后重新选择焦点时,不会陷入无限循环。 // on first focus (bubbles up to document), open the menu $(document).on('focus', '.select2-selection.select2-selection--single', function (e) { $(this).closest(".select2-container").siblings('select:enabled').select2('open'); }); // steal focus during close - only capture once and stop propogation
  • jQuery
    1 介绍 jQuery由美国人John Resig(约翰·莱西格)于2006年创建 jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 jQuery能做的JavaScript也都能做,但使用jQuery能大幅提高开发效率jQuery和JavaScript的之间的关系,可以理解为“成语”和“白话文”之间的关系,成语是对白话文的高度压缩,而jQuery也是对JavaScript的高度压缩库 2 jQuery的使用 jQuery作为一个单独存在的js文件,并不会与其他的js文件发生冲突,可直接引入 <script src="js/jquery-3.4.1.min.js"></script> 2.1 基本的语法介绍 <script> $(selector).action(); </script> 工厂函数 $() :将DOM对象转化为jQuery对象 选择器 selector:获取需要操作的DOM 元素 方法action():jQuery中提供的方法,其中包括绑定事件处理的方法“$”等同于“ jQuery ” 例如: <body> <p>hello</p> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> alert( $("p").text() ); //
  • Toggle visibility of sibling element jquery
    I have several divs on a page. Each div has a heading which I can click to toggle visibility of the corresponding div. The divs are set to display:none by default. I have used #ids in the click functions of each of the divs , however since I have several divs on the same page. I would want to use a single .class so that I have a single class thus a single function that controls the visibility. I am guessing i would then need to use .parent and .sibling classes to do this. Below is an excerpt from my code: HTML: <div> <legend> <a id="show_table" class="show_table" href="#"> <span id="plus_minus
  • jQuery UI 滑动轻松实现兄弟推送(jQuery UI slide ease sibling push)
    问题 我正在使用 jQuery UI 的slide切换效果来切换 div: $("#link").click(function(){ $("#targetDiv").toggle("slide", {direction: "up"}, 1000); }); 幻灯片是唯一具有我想要的动画的效果,本质上是从顶部向下的 div。 我不想要toggleSlide因为那种只是改变元素的高度。 slide的唯一问题是它会立即将兄弟姐妹推到最终位置:http://jsfiddle.net/XYDyy/2/ 那么有没有办法让同级元素在动画 div 调整时调整它们的位置? 任何意见,将不胜感激。 回答1 您可以通过在 jQuery 添加在元素周围的.ui-effects-wrapper上执行slideUp() / slideDown()来欺骗它: $("#link").click(function() { if ($("#div1").is(':visible')) { $("#div1").toggle("slide", {direction: "up"}, 1000); $("#div1").parent(".ui-effects-wrapper").slideUp(1000); } else { $("#div1").toggle("slide", {direction: "up"}
  • 使用JQuery切换手风琴(Toggle an Accordion with JQuery)
    问题 我得到了一个手风琴,它不会切换每个标签的打开和关闭。 It only closes the tab when another title is selected, but I'd like the ability for the user to close it on click as well. 我不确定如何编辑此Jquery以使其发生。 jQuery("ul.gdl-accordion li").each(function(){ jQuery(this).children(".accordion-content").css('height', function(){ return jQuery(this).height(); }); if(jQuery(this).index() > 0){ jQuery(this).children(".accordion-content").css('display','none'); }else{ jQuery(this).find(".accordion-head-image").addClass('active'); } jQuery(this).children(".accordion-head").bind("click", function(){ jQuery(this).children().addClass
  • jquery 多级手风琴(jquery multi level accordion)
    问题 我有简单的多级手风琴插件。 这对我来说几乎是完美的。 (function(jQuery){ jQuery.fn.extend({ accordion: function() { return this.each(function() { var $ul = $(this); if($ul.data('accordiated')) return false; $.each($ul.find('ul, li>div'), function(){ $(this).data('accordiated', true); $(this).hide(); }); $.each($ul.find('a'), function(){ $(this).click(function(e){ activate(this); return void(0); }); }); var active = $('.active'); if(active){ activate(active, 'toggle'); $(active).parents().show(); } function activate(el,effect){ $(el).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div
  • 使用jQuery切换输入禁用属性(Toggle input disabled attribute using jQuery)
    问题 这是我的代码: $("#product1 :checkbox").click(function(){ $(this) .closest('tr') // Find the parent row. .find(":input[type='text']") // Find text elements in that row. .attr('disabled',false).toggleClass('disabled') // Enable them. .end() // Go back to the row. .siblings() // Get its siblings .find(":input[type='text']") // Find text elements in those rows. .attr('disabled',true).removeClass('disabled'); // Disable them. }); 如何切换.attr('disabled',false); ? 我似乎无法在Google上找到它。 回答1 $('#el').prop('disabled', function(i, v) { return !v; }); .prop()方法接受两个参数: 属性名称(禁用,选中,选择)为true或false 属性值,可以是: (空)-返回当前值。
  • 在jQuery .live()方法中模拟“焦点”和“模糊”(Simulating “focus” and “blur” in jQuery .live() method)
    问题 更新:从jQuery 1.4开始, $.live()现在支持focusin和focusout事件。 jQuery当前1不支持将“ blur”或“ focus”用作$ .live()方法的参数。 我可以实施哪种变通办法来实现以下目的: $("textarea") .live("focus", function() { foo = "bar"; }) .live("blur", function() { foo = "fizz"; }); 1 。 2009年7月29日,版本1.3.2 回答1 工作解决方案: (function(){ var special = jQuery.event.special, uid1 = 'D' + (+new Date()), uid2 = 'D' + (+new Date() + 1); jQuery.event.special.focus = { setup: function() { var _self = this, handler = function(e) { e = jQuery.event.fix(e); e.type = 'focus'; if (_self === document) { jQuery.event.handle.call(_self, e); } }; jQuery(this).data(uid1
  • 表单提交应保留在同一选项卡上(Form submit should stay on the same tab)
    问题 通过单击按钮提交表单时,页面重新加载时应打开相同的选项卡,但它将转到默认选项卡。 我试过本地存储,但它不起作用。 我的代码有什么问题? [这现在起作用了。 见下面我的回答] jQuery: $(document).ready(function() { $('a[data-toggle="tab"]').on('show.bs.tab', function(e) { localStorage.setItem('activeTab', $(e.target).attr('href')); }); var activeTab = localStorage.getItem('activeTab'); if(activeTab){ $('#myTab a[href="' + activeTab + '"]').tab('show'); } $('.tabs .tab-links a').on('click', function(e) { var currentAttrValue = jQuery(this).attr('href'); // Show/Hide Tabs jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400); jQuery('.tabs ' + currentAttrValue).delay(400)
  • JQuery只切换最接近它的相关div(JQuery toggle only related div closest to it)
    问题 我有一组类似的 div,我正在使用一些基本代码进行切换,如下所示: $(".field-group-format-toggler-abstract").click(function() { $(".field-group-format-wrapper").toggle(); }); 我遇到的问题是,每当我触发“+”时,当我只想切换最接近它的相关 div 时,它会切换具有相同类的所有其他 div .field-group-format-wrapper 。 我尝试了 .next 和 .closest 但这似乎只是锁定了事情然后它不起作用但我没有收到语法错误例如 $(".field-group-format-toggler-abstract").click(function() { $(".field-group-format-wrapper").closest().toggle(); }); 我在这里创建了一个工作版本,但如果你像上面一样添加 .closest,它就不再工作了。 http://jsfiddle.net/LHguJ/5/ ** 注意,我只想显示/隐藏field-group-format-wrapper而不是其他任何内容,因此“标题”仍然需要显示是否已展开。 回答1 你想要的是兄弟姐妹()。 并使用 this 来引用被点击的元素。 您使用的是最接近的,它寻找最接近的(
  • jQuery 中的 focusin/focusout 与 focus/blur 有什么区别? [复制](What is the difference between focusin/focusout vs focus/blur in jQuery? [duplicate])
    问题 这个问题在这里已经有了答案: focusin/focusout 和 focus/blur 之间的区别,举例(2 个回答) 6年前关闭。 我在 jQuery 1.7.2 中使用以下代码处理一些事件: $().on('focus blur', function(event) { console.log(event.type); }); 我注意到这两个事件的event.type都会打印出: focusin和focusout 。 focusin/focusout与focus/blur什么区别? 回答1 简短回答: focusin气泡, focus没有。 focusout气泡, blur没有。 阅读文档: 当元素或其中的任何元素获得焦点时,focusin 事件将发送到该元素。 这与焦点事件的不同之处在于它支持检测父元素上的焦点事件(换句话说,它支持事件冒泡)。 回答2 从文档: 当元素或其中的任何元素获得焦点时,focusin 事件将发送到该元素。 这与焦点事件的不同之处在于它支持检测父元素上的焦点事件(换句话说,它支持事件冒泡) 。 是的,您也可以在这里找到相同的答案:javascript/jQuery 事件“focus”和“focusin”之间的区别? 回答3 当元素或其中的任何元素获得焦点时,focusin 事件将发送到该元素。
  • 使用HTML5本地存储在页面刷新时保留jQuery切换状态(Use HTML5 localstorage to retain jQuery toggle state on page refresh)
    问题 我刚刚了解了HTML5的“本地存储”功能。 我一直在尝试将其与jQuery切换结合使用,以使div刷新页面时保持div的最新状态。 这似乎是cookie的绝佳替代品! 我在理解如何以这种方式实现它时遇到了很多麻烦。 到目前为止,这是我尝试过的: HTML: <div id="container"</div> <a id="foo" href="javascript:void(0);">Click Me</a> <div id="bar"></div> </div> CSS: #container {width:200px; height:220px;} #foo { display:block; float:left; width:200px; height:20px; text-align:center; } #bar { display:none; float:left; height:200px; width:200px; background:#000000; } jQuery并尝试从此处了解本地存储: $(document).ready(function(){ $('#foo').click(function() { $(this).siblings().toggle(); localStorage.setItem(display, block); }); var
  • Toggle an Accordion with JQuery
    I had an accordion given to me that is not toggling each tab open and close. It only closes the tab when another title is selected, but I'd like the ability for the user to close it on click as well. I'm not sure how to edit this Jquery to allow this to happen. jQuery("ul.gdl-accordion li").each(function(){ jQuery(this).children(".accordion-content").css('height', function(){ return jQuery(this).height(); }); if(jQuery(this).index() > 0){ jQuery(this).children(".accordion-content").css('display','none'); }else{ jQuery(this).find(".accordion-head-image").addClass('active'); } jQuery(this)
  • 隐藏所有下一个 tr td 直到下一个 tr th(Hide all next tr td until next tr th)
    问题 它应该很简单,但是这个 jQuery 函数占用了太多元素,我认为它甚至隐藏了 jQuery。 我想做的是,当一个人点击tr th 时,所有下一个tr td都应该隐藏,直到下一个tr th 。 我怎样才能让这个代码工作? <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <style> th { background:#dad; font-weight:bold; font-size:16px; width: 50%; } td { background:red; font-weight:bold; font-size:16px; width: 50%; } </style> </head> <body> <table id="example"> <tr> <th> <button>Show it 3</button> </th> </tr> <tr> <td>test 1</td> </tr> <tr> <td>test 2</td> </tr> <tr> <th> <button>Show it 2</button> </th> </tr> <tr> <td>test 3</td> </tr> <tr> <td>test 4</td> <
  • 如果与Prototype JS一起使用,Popover将隐藏父元素(Popover hides parent element if used with Prototype JS)
    问题 在更新到Bootstrap 2.3.0之后,我注意到popover工具提示的奇怪行为。 如果您输入该字段并尝试导航,则工具提示将消失并隐藏输入字段。 仅在最新版本的引导程序中才会出现此问题,不确定确切更改了什么,但是2.2.2在Prototype上运行良好。 jQuery.noConflict(); jQuery('input[data-content]').popover({ trigger: 'focus' }); 这是工作示例:http://jsfiddle.net/U6EDs/4/ 回答1 这个github问题https://github.com/twitter/bootstrap/issues/6921描述了您所看到的。 我正在从问题中复制信息。 bootstrap-tooltip.js中的这些行会导致问题: , hide: function () { var that = this , $tip = this.tip() , e = $.Event('hide') ///this line this.$element.trigger(e) /// this line if (e.isDefaultPrevented()) return //and this line PrototypeJS向Element原型添加了方法,因此当jQuery尝试在元素上触发hide(
  • 如何关闭外部点击的下拉菜单?(How can I close a dropdown on click outside?)
    问题 当用户单击下拉菜单之外的任何地方时,我想关闭我的登录菜单下拉菜单,我想使用Angular2和Angular2“方法”来完成此操作... 我已经实施了一个解决方案,但是我对此确实没有信心。 我认为必须有一种最简单的方法来获得相同的结果,因此,如果您有任何想法...让我们讨论一下:)! 这是我的实现: 下拉组件: 这是我的下拉菜单的组成部分: 每次将此组件设置为可见时,(例如:当用户单击按钮以显示它时)它都会订阅一个存储在SubjectsService中的“全局” rxjs主题userMenu 。 每次隐藏时,它都会退订该主题。 该组件模板内任何位置的每次点击都会触发onClick()方法,该方法只会停止将事件冒泡到顶部(和应用程序组件) 这是代码 export class UserMenuComponent { _isVisible: boolean = false; _subscriptions: Subscription<any> = null; constructor(public subjects: SubjectsService) { } onClick(event) { event.stopPropagation(); } set isVisible(v) { if( v ){ setTimeout( () => { this._subscriptions =
  • 如何并排展开和折叠三个 div?(How to expand and collapse three div's side by side?)
    问题 $(document).ready(function () { $("#toggle").click(function () { if ($(this).data('name') == 'show') { $("#sidebar").animate({ width: '10%' }).hide() $("#map").animate({ width: '89%' }); $(this).data('name', 'hide') } else { $("#sidebar").animate({ width: '29%' }).show() $("#map").animate({ width: '70%' }); $(this).data('name', 'show') } }); }); html, body { width:100%; height: 100%; } #header { width: 100%; height: 20%; float: left; border: 1px solid; } #map { width: 80%; height: 80%; float: left; border: 1px solid; } #sidebar { width: 19%; height: 80%; float: left; border: 1px solid; }
  • 如何设置对输入字段的关注?(How to set focus on input field?)
    问题 在AngularJS中将焦点设置在输入字段上的“角度方法”是什么? 更具体的要求: 打开模态后,将焦点放在此模态内的预定义<input> 。 每当<input>变为可见(例如,通过单击某些按钮)时,将焦点放在它上面。 我试图通过autofocus实现第一个要求,但这仅在首次打开Modal时才有效,并且仅在某些浏览器中有效(例如,在Firefox中不起作用)。 任何帮助将不胜感激。 回答1 打开模态后,将焦点放在此模态内的预定义<input>上。 定义一个指令,并使其$ watch一个属性/触发器,以便它知道何时集中该元素: Name: <input type="text" focus-me="shouldBeOpen"> app.directive('focusMe', ['$timeout', '$parse', function ($timeout, $parse) { return { //scope: true, // optionally create a child scope link: function (scope, element, attrs) { var model = $parse(attrs.focusMe); scope.$watch(model, function (value) { console.log('value=', value)
  • jQuery: On form input focus, show div. hide div on blur (with a caveat)
    I am able to make a hidden div show/hide when an input field is in focus/blur using the following code: $('#example').focus(function() { $('div.example').css('display','block'); }).blur(function() { $('div.example').fadeOut('medium'); }); The problem is I want div.example to continue to be visible when the user is interacting within this div. E.g. click, or highlighting the text etc. within div.example. However div.example fades out whenever the input is not in focus and the mouse is interacting with elements within the div. The html code for the input and div elements is as follows: <p>
  • jQuery UI slide ease sibling push
    I'm using jQuery UI's slide toggle effect to toggle a div: $("#link").click(function(){ $("#targetDiv").toggle("slide", {direction: "up"}, 1000); }); Slide is the only effect that has the animation that I want, essentially, the div coming down from the top. I don't want toggleSlide because that sort of just changes the height of the element. The only problem with slide is that it immediately pushes siblings around to the end positions: http://jsfiddle.net/XYDyy/2/ So is there some way to have sibling elements adjust their position as the animating div adjusts? Any advice would be appreciated.