因此,我遇到了将.blur
和.click
事件处理程序绑定到同一可点击元素的问题。我想要的用户体验如下:
用户点击搜索图标,会出现搜索字段;当用户再次点击搜索图标时,他们可以折叠并隐藏搜索字段。如果他们点击了,搜索字段应该隐藏。
到目前为止,我能够实现我想要的大多数,除了我点击之后无法通过.click
绑定来切换类。我想这可能是因为切换后$
选择器没有任何结果可供选择?我对javascript相对较新,所以我有点不清楚javascript或jQuery究竟会如何处理这样的事情。
谢谢大家!
Jsfiddle:http://jsfiddle.net/TpXJe/1/
修改:包含此处的代码,以便将来的SO用户可以看到它:
HTML:
<form class="hidden-xs search-container navbar-right search-form" method="get">
<div class="input-group">
<input id="search-box" type="search" class="search-box" name="s" class="search-field form-control" />
<label class="hide">Search for something</label>
<label for="search-box"><span id="searchDivider">|</span>
<div class="icon-continer"> <span class="glyphicon glyphicon-search search-icon"></span>
</div>
</label>
</div>
</form>
的CSS:
.search-container {
right: 0px;
}
#searchDivider {
position: absolute;
right: 0px;
top:31px;
z-index: 1;
color: @brand-success;
cursor: pointer;
font-weight: 200;
}
// Style the search box
$tl: .3s; // transition length
.search-box {
outline-width: 0;
transition: width $tl, border-radius $tl, background $tl;
position: absolute;
right:-37px;
top: 20px;
z-index: 100;
width: 40px;
height: 40px;
border-radius: 20px;
border: none;
cursor: pointer;
background: transparent;
& + label .search-icon {
color: black }
&:hover {
color: white;
background: transparent;
box-shadow: 0 0 0 1px transparent;
& + label .search-icon {
color: white }
}
&.focused {
transition: width $tl cubic-bezier(.18,.57,.25,.94), border-radius $tl;
border: none;
outline: none;
box-shadow: none;
padding-left: 15px;
cursor: text;
width: 600px;
border: 1px solid black;
border-radius: auto;
background: white;
color: black;
& + label .search-icon {
color: black; }
}
&:not(:focus) {
text-indent:-5000px; } // for more-graceful falling back (:not browsers likely support indent)
}
#search-submit {
position: relative;
left: -5000px;
}
.search-icon {
position: absolute;
right: -45px;
top: 14px;
z-index: 1000;
color: black;
cursor: pointer;
width: 60px;
height: 60px;
padding: 23px;
}
js:
$('.search-icon').click(
function () {
$('.search-box ').toggleClass(' .search-box focused');
});
$('.search-box').blur(
function () {
$('.search-box').removeClass('focused');
});
答案 0 :(得分:4)
正如Ehsan在评论中所说,似乎点击已经点击的图标一次会触发click()和blur()事件。我刚添加一个变量来表示clicked / unlicked的状态,它对我有用!另外在下面更新的小提琴是我认为你打算在评论中提到的雅各布 - 班级名称是'专注'而不是'.search-box focused'。
这是JS代码:
var clicked = false;
$('.search-icon').click(
function () {
if (clicked) {
$('.search-box ').removeClass('focused');
clicked = false;
} else {
$('.search-box ').addClass('focused');
clicked = true;
}
});
$('.search-box').blur(
function () {
$('.search-box').removeClass('focused');
答案 1 :(得分:-3)
我最近要说的是将我的所有事件监听器设置为变量(对象)。它使得能够非常容易地将多个事件分配给单个对象。
/**
* Event listeners.
* Params: element, event : method
* NOTE: element is passed in as a string, not jQuery object!
* This so we have the possibility of multiple events for a single element (eg. focus & change for the same element).
*
*/
eventHandlers: {
'a click': 'onAnchorClick',
'a hover': 'onAnchorHover'
},
/**
* Registers all event listeners/handlers.
* @returns {void}
*
*/
registerEventHandlers: function() {
var that = this;
$.each(this.eventHandlers, function(key, val) {
var split = key.split(" ");
var element = split[0];
var event = split[1];
$(document).on(event, element, that[val]);
});
}
...
/**
* Event listener for all anchor click events.
* @param {object} event | The click event.
* @returns {void}
*
*/
onAnchorClick: function(event) {
console.log('click event');
// For example purposes:
var ga_eventData = {
'category': 'Text Link',
'action': 'Click',
'label': event.currentTarget.innerText,
'optionalData': {
'page': window.location.protocol + '//' + window.location.host + window.location.pathname
}
}
GA.registerEvent(ga_eventData); // GA is my google analytics module in this example
},
/**
* Event listener for all anchor hover events.
* @param {object} event | The hover event.
* @returns {void}
*
*/
onAnchorHover: function(event) {
console.log('hover event');
}
...
然后在我的初始化方法中,我只需调用:
/**
* Initialization method.
* @returns {void}
*
*/
initialize: function() {
var that = this;
that.registerEventHandlers();
}