javascript - 单击搜索表单时保持子项切换 - jquery

Question

我正在尝试为我的网站制作一个时尚的响应式 header ，并使用 jQuery 来 slideToggle #navSearchDD 以及 header 内部的搜索表单。我遇到的问题是当我单击搜索字段时，它再次 slideToggles #navSearchDD 并再次隐藏它。

我做了一个 JSFiddle 显示情况:

https://jsfiddle.net/tksengen/yh8wju2q/1/

jQuery(function () {

    jQuery("#navMoreButton").click(function () {
        jQuery("#navMoreDD").slideToggle("fast", function () {
            // Animation complete.
        });
    });

    jQuery("#navSearchButton").click(function () {
        jQuery("#navSearchDD").slideToggle("fast", function () {
            // Animation complete.
        });
    });

});

body { 
    padding: 0;
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    margin: 0;
    padding: 0;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

.fs-nav-wrap {
	width: 100%;
	height: 50px;
	background-color: #22222c;
}

.fs-nav-border {
	height: 48px;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
    
}

.fs-nav-wrap header {
	height: 100%;
}

.fs-nav-search, .fs-nav {
	width: 20%;
	float: left;
}

.fs-nav-logo {
	width: 60%;
	float: left;
}

.fs-nav-logo {
	height: 100%;
	text-indent: -9999px;
}

.nav-logo {
	font-size: 14px;
	color: #F9F9F9;
	margin: 0;
	padding: 0;
	display: block;
	height: 100%;
}

.nav-logo a {
	height: 100%;
	display: block;
	background-image: url('images/mobile-logo.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 35px;
	
}

.fs-nav-search {
	height: 100%;
}

.fs-nav {
	height: 100%;
	text-align: right;
	
}

.fs-nav ul,
.fs-nav-search ul {
	height: 100%;
}

.fs-nav ul li,
.fs-nav-search ul li {
	display: inline-block;
	font-weight: 300;
	line-height: 48px;
	margin-right: 10px;
	
}

.fs-nav .nav-desk {
	display: none;
}

.fs-nav .nav-more,
.fs-nav-search ul li {
	margin-right: 0;
	padding: 0 20px;
	border-left: 1px solid #22222c;
	border-right: 1px solid #22222c;
}

.fs-nav .nav-more:hover,
.fs-nav-search ul li:hover {
	background-color: #15151c;
	border-left: 1px solid #333333;
	border-right: 1px solid #333333;
	cursor: pointer;
}

.fs-nav .nav-more img,
.fs-nav-search ul li img {
	width: 15px;
}

.fs-nav .nav-more {}

#navSearchDD {
	display: none;
	position: absolute;
	right: 0;
	min-width: 300px;
	width: 100%;
	background-color: #15151c;
	z-index: 5;
	text-align: left;
}


#navSearchDD {
    display: block;
}

#navSearchDD:after {
	content: "";
	height: 1px;
	width: 55px;
	background-color: #15151c;
	border-left: 1px solid #333;
	border-right: 1px solid #333;
	position: absolute;
	top: 0;
	left: 0;
}

.navSearchDD-border {
	border: 1px solid #333;
}

#navSearchDD span.screen-reader-text {
	display: none;
}

#navSearchDD input {
	background-color: inherit;
	border: none;
	color: #8c8ca4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fs-nav-wrap group">
    <div class="fs-nav-border group">
        <header>
            <div class="fs-nav-search">
                <ul>
                    <li id="navSearchButton">
                        <img src="http://fsdev.tew.no/wp-content/themes/fifasamfunnetbny/images/nav-search.svg" alt="Søk">
                        <div id="navSearchDD">
                            <div class="navSearchDD-border">
                                <form role="search" method="get" class="search-form" action="">
                                    <label>	<span class="screen-reader-text">Søk etter:</span>

                                        <input type="search" class="search-field" placeholder="Søk …" value="" name="s" title="Søk etter:">
                                    </label>
                                </form>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="fs-nav-logo">
                	<h1 class="nav-logo">
				<a href="/">Test - Hjem</a>
			</h1>

            </div>
            <div class="fs-nav">
                <ul>
                    <li class="nav-desk"><a href="#">Test</a>
                    </li>
                    <li class="nav-desk"><a href="#">Test</a>
                    </li>
                    <li class="nav-desk"><a href="#">Test</a>
                    </li>
                    <li class="nav-desk"><a href="#">Test</a>
                    </li>
                    <li class="nav-more" id="navMoreButton">
                        <img src="http://fsdev.tew.no/wp-content/themes/fifasamfunnetbny/images/nav-more.svg" alt="Mer">
                        
                        </li>
                </ul>
            </div>
        </header>
        <!-- #masthead -->
    </div>
</div>
<!-- .fs-nav-wrap -->

当我在搜索表单中单击时，如何保持 #navSearchDD 可见，或者是否有更好的方法来实现我在这里的目标？

此外，如果由于某种原因我将 display: none; 设置为默认值，我无法让 slideToggle 在 jsFiddle 中工作？

Answer 1

发生的情况是您的搜索字段位于#navSearchDD内，而#navSearchDD又位于navSearchButton内。

因此，当您在搜索字段内单击时，也会检测到 #navSearchButton 内的单击。

您可以做的是检查点击是否发生在搜索字段中，如果发生则不要切换搜索栏。

    jQuery("#navMoreButton").click(function () {
        jQuery("#navMoreDD").slideToggle("fast", function () {
            // Animation complete.
        });
    });

    jQuery("#navSearchButton").click(function (event) {
        if(event["toElement"]["className"] != 'search-field') {
            jQuery("#navSearchDD").slideToggle("fast", function () {
                // Animation complete.
            });
        }

    });

jsFiddle:https://jsfiddle.net/yh8wju2q/10/

如果这不是您正在谈论的 child ，您可以使用此方法来查找特定的 child 并防止其切换。