点击后，我正在尝试将焦点放在输入字段上。我认为这会很简单：
jQuery('li a').on('click', function() {
jQuery('input.s').focus();
});
但是，搜索输入字段没有得到关注。我在想它是因为输入字段是一个弹出窗口（实际上，一个div在单击链接时被取消隐藏）。我需要做哪些调整来正确定位输入字段，以便在单击链接时集中注意力？
<div class="fusion-custom-menu-item-contents" style="display: block;"><form role="search" class="searchform" method="get" action="">
<div class="search-table">
<div class="search-field">
<input type="text" value="" name="s" class="s" placeholder="Search ...">
</div>
<div class="search-button">
<input type="submit" class="searchsubmit" value="">
</div>
</div>
</form></div>
element.style {
display: block;
}
/media="all"
#menu-global-header-menu-1 > li.fusion-custom-menu-item.fusion-main-menu-search.fusion-last-menu-item.fusion-main-menu-search-open > div {
display: block !important;
}
.fusion-main-menu .fusion-main-menu-cart .fusion-custom-menu-item-contents, .fusion-main-menu .fusion-main-menu-search .fusion-custom-menu-item-contents, .fusion-main-menu .fusion-menu-login-box .fusion-custom-menu-item-contents {
background-color: #f2efef;
border-color: #dcdadb;
}
/media="all"
.fusion-main-menu .fusion-main-menu-search-open .fusion-custom-menu-item-contents {
visibility: visible;
opacity: 1;
}
/media="all"
.fusion-main-menu .fusion-main-menu-search .fusion-custom-menu-item-contents {
display: none;
width: 250px;
padding: 25px;
text-align: right;
border: 1px solid transparent;
}
.fusion-main-menu .fusion-custom-menu-item-contents {
font-family: 'Raleway', Arial, Helvetica, sans-serif;
font-weight: 400;
}
/media="all"
.fusion-main-menu .fusion-custom-menu-item-contents {
/* position: absolute; */
/* left: auto; */
/* right: 0; */
/* visibility: hidden; */
/* opacity: 0; */
-webkit-transition: opacity 0.2s ease-in;
-moz-transition: opacity 0.2s ease-in;
-o-transition: opacity 0.2s ease-in;
/* transition: opacity 0.2s ease-in; */
}
/media="all"
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheetdiv {
display: block;
}
Inherited from
user agent stylesheetli {
display: list-item;
text-align: -webkit-match-parent;
}
Inherited from
/media="all"
.fusion-main-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
user agent stylesheetul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
Inherited from
/media="all"
.fusion-row {
margin: 0 auto;
zoom: 1;
}
Inherited from
#reviews #comments > h2, #wrapper .fusion-tabs-widget .tab-holder .news-list li .post-holder .meta, #wrapper .meta, .fusion-blog-timeline-layout .fusion-timeline-date, .fusion-rollover .price .amount, .post .post-content, .post-content blockquote, .project-content .project-info h4, .quantity .minus, .quantity .plus, .quantity .qty, .review blockquote div, .search input, .sidebar .jtwt, .sidebar .widget .recentcomments, .sidebar .widget_archive li, .sidebar .widget_categories li, .sidebar .widget_links li, .sidebar .widget_meta li, .sidebar .widget_nav_menu li, .sidebar .widget_pages li, .sidebar .widget_recent_entries li, .title-row, body {
color: #747474;
}
#side-header .fusion-contact-info, #side-header .header-social .top-menu, #slidingbar-area .slide-excerpt h2, .fusion-accordian .panel-body, .fusion-footer-widget-area .slide-excerpt h2, .post-content blockquote, .project-content .project-info h4, .review blockquote q, .sidebar .slide-excerpt h2, body {
line-height: 26px;
}
#slidingbar-area .slide-excerpt h2, .fusion-footer-widget-area .slide-excerpt h2, .jtwt .jtwt_tweet, .sidebar .jtwt .jtwt_tweet, .sidebar .slide-excerpt h2, body {
font-size: 18px;
line-height: 27px;
}
#nav ul li ul li a, #reviews #comments > h2, #sticky-nav ul li ul li a, #wrapper #nav ul li ul li > a, #wrapper #sticky-nav ul li ul li > a, .avada-container h3, .comment-form input[type="submit"], .ei-title h3, .fusion-blog-shortcode .fusion-timeline-date, .fusion-image-wrapper .fusion-rollover .fusion-rollover-content .fusion-rollover-categories, .fusion-image-wrapper .fusion-rollover .fusion-rollover-content .fusion-rollover-title, .fusion-image-wrapper .fusion-rollover .fusion-rollover-content .price, .fusion-image-wrapper .fusion-rollover .fusion-rollover-content a, .fusion-load-more-button, .fusion-page-title-bar h3, .meta .fusion-date, .more, .post-content blockquote, .project-content .project-info h4, .review blockquote div strong, .review blockquote q, .ticket-selector-submit-btn[type="submit"], body {
font-family: 'Raleway', Arial, Helvetica, sans-serif;
font-weight: 400;
}
/media="all"
body {
margin: 0;
color: #747474;
min-width: 320px;
-webkit-text-size-adjust: 100%;
font: 13px/20px 'PTSansRegular', Arial, Helvetica, sans-serif;
}
答案 0 :(得分：0)
当你提到脚本工作正常时，我认为当你点击a选择器时，它会移动到href中的给定网址。
所以使用preventDefault事件，浏览器不会使用新的网址
jQuery('#menu-global-header-menu-1 > li > a').on('click', function(e) {
e.preventDefault();
jQuery('.fusion-custom-menu-item-contents').find('input.s').focus();
});.fusion-custom-menu-item-contents {
border: 1px solid;
padding: 46px;
width: 150px;
}
input:focus{
border: 1px solid green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu-global-header-menu-1">
<li><a href="#">click here to focus</a></li>
</ul>
<div class="fusion-custom-menu-item-contents" style="display: block;">
<form role="search" class="searchform" method="get" action="">
<div class="search-table">
<div class="search-field">
<input type="text" value="" name="s" class="s" placeholder="Search ...">
</div>
<div class="search-button">
<input type="submit" class="searchsubmit" value="">
</div>
</div>
</form>
</div>
答案 1 :(得分：-1)
关注输入字段的最简单方法是设置属性＆＃34;自动对焦＆＃34;
<input type="text" value="" name="s" class="s" placeholder="Search" autofocus="autofocus">
该字段默认为焦点。
我在你的网页上试过它并且它有效：）